ホシガメ一家の飼育ブログで仙台からライブカメラ配信

インドホシガメを繁殖中なので、産卵から孵化まで飼育の状況と共にブログに投稿します。ホシガメの価格や飼育設備などの情報もまとめてます。ライブカメラは毎日8:00~22:00くらいで配信中!

2017 07/16

Androidスマホのブラウザで突然Chromeのみ表示レイアウトが崩れたテキストになり、こりゃCSS読み込んでねーなぁって現象が直らない場合の解決方法

まぁ、やたら長いブログ記事タイトル、そのまんまな話なんですけれどw

自分のブログ表示がスマホでどう見えるかチェックしたり、ライブカメラの状況をコメントするためにチャットウィンドウに入力したり、ブログ管理の諸々をAndroidスマホから行うことはよくあるわけです。


ところが…


いつものように、Androidスマホから自分の『ホシガメ一家の飼育ブログで~』にアクセスしましたら…

いつも見るレスポンシブデザインでメリハリのある色遣いの見た目が、味も素っ気もないテキストベースの表示になってるじゃありませんか!

どうも、CSS(スタイルシート)を読み込んでないみたい…。

Oh!No!

何度か読み込みなおしてみても症状変わらずなので、焦ってFC2ブログの管理画面からテンプレートの更新やらしてみましたが、改善しません…。

不具合中のスクショは撮ってませんが、正しい表示は↓コレです。

20170716185854c9b.png 
「急がば回れ」って昔から言いますのでw、一旦落ち着いて考え原因の切り分けから始まり症状改善にいたるまでの手順を決めて、ひとつずつ試した結果なんとか解決しましたので、経緯をまとめてみました。


ブログサイトにアクセスするデバイスに起因するのか?


PCでの表示から確認してみますと、Chromeでいつも通りにCSS(スタイルシート)を読み込んだ正常表示になってます。
「レスポンシブデザインだから、モバイル端末でCSSを読み込めない事象が発生したのか?」とも思い、iPadやAndroidタブレットからも見てみましたが異常なし。
って事は、Androidスマホのみの現象ってことになりますね。


Androidスマホ起因か?ブラウザのアプリ起因か?


スマホに入ってる標準ブラウザからアクセスすると、見事に正常表示されました。
これで、スマホのChromeが原因であることが確定ですね。


AndroidのCromeで既知の不具合対処は?


似たような不具合のケースをサクッと検索し、見つけた以下の対処をしていきます。

Chromeのデータセーバーが影響する?


Chromeにはスマホ端末にダウンロードするデータ量を少なくして、通信料を抑えたり読み込み時間を短縮したりする機能として、データセーバーって機能があるようです。

これがONになってると、CSSが効かなくなったりってことがあるようで、OFFにすればCSSの読み込みが効くようになるそうです。

で、早速Chromeの設定見てみたら…、デフォでOFFになってんじゃねーの!w

キャッシュが原因でCSSが読み込まれない?


これはブラウザの表示不具合では基本的な対処ですが、キャッシュや履歴を削除することで改善するってケースのことですね。

Chromeの設定から入っていって、>プライバシー>閲覧履歴を消去する>の中に、
  • 閲覧履歴
  • Cookieとサイトデータ
  • キャッシュされた画像とファイル
がデフォでチェックされてます。

このケースの不具合ではキャッシュのみ削除すればいいのかもしれませんが、面倒くさがりの管理人ダイジは、そのまま画面下の『データを消去』をタップして消去しました。
 (この辺の画面遷移や表記は、Crome のバージョンによって違うので注意)

でも、直りません…。
(;_;)


こりゃ、Chromeのアプリ本体を疑うしかない状況ですね…、昨日までは正常表示されてたので、可能性としてありうるのはアプリの自動更新でなんらか不調原因が発生ってパターンかな?


こうなったらの最後の手段だわ!の奥の手w


ザックリ検索して出てきた対処法では直りませんでしたので、「斯くなる上は…、サムライらしくスパッっとChromeの再インストールじゃ!」ってことで以下。

20170716171506118.png 
Chromeのアイコンを長押しすると、上の画像のようにメニューが出ますので、『アプリケーション情報』をタップします。

20170716171507dc0.png 
出てきたアプリ情報の画面で、『アップデートのアンインストール』をタップして初期化します。

するとChromeのバージョンが、スマホ購入時の懐かしいバージンに戻ります。

この旧バージョンで自分のブログにアクセスしてみますと…


イ~~~ィエッスッ!


直りましたよん~。
ヽ(≧∀≦)ノ

たぶん、自動更新でバージョンアップされた際に、何らかアップデートが不完全でアプリに不具合が発生しただけ?でしょうから、この状態から最新バージョンにしても大丈夫なはずです。

ってことで、Google PlayからCromeを更新してみます。


はい、大丈夫でした~!


めでたし、めでたし。
((⊂(^ω^)⊃))

以上、地球上のどこかで誰かの参考になれば幸いです。

関連記事

Androidスマホのブラウザで突然Chromeのみ表示レイアウトが崩れたテキストになり、こりゃCSS読み込んでねーなぁって現象が直らない場合の解決方法

スマホブラウザChromeCSS

(-)TB(-)

AFTER「ホシガメの飼育でベビーやピンポンと呼ばれる幼体を死なせずに成長させるには

BEFORE「ホシガメの飼育に必要な設備は?初期費用とランニングコストは?

Top