スマホでYahooの表示がおかしい

スマホでYahoo!にアクセスすると、たまに表示がおかしくなることがあります。

 

何を隠そう僕もその経験があります。

 

Android、iPhoneともに例外なく発生するみたいなので、解決案とあわせて原因を調べてみました。

 

表示崩れの再現

Android、またはiPhoneでYahoo! Japanにアクセスするとたまに発生し、その後しばらく表示崩れのままとなります。

 

必ず再現させる方法はないみたいですね。

 

ただ、それだとどういう状態なのかすら分からないので、過去に発生した表示崩れの画面をキャプっておいたので貼り付けます。

 

うーん、コーディングの経験がある人であればすぐ分かると思いますが、明らかにCSSが利いてないですね。。。

 

最近はあまりないですけどその昔、回線が遅い時代にはCSSやJavaScriptが読み込まれないことがありましたがそんな感じでしょうか。

 

原因の特定

Google先生に聞いたらすぐに分かりました。

 

どうやらキャッシュが原因のようですね。

 

ガラケー時代にもありましたがキャッシュがしつこいせいで、いくら更新しても古いCSSを参照してしまい、なかなか新しいCSSを読み込んでくれなかったのと同じ事象のようです。

 

つまり、Yahoo側でcssをアップデートしても、キャッシュのせいで新しいCSSを読み込んでくれないことが原因でした。

 

原因が分かったので、続いて解決させましょう。

 

解決方法

解決するにはブラウザのキャッシュを削除すればOKです。

 

ブラウザのキャッシュの削除手順は、AndroidとiPhoneとで異なるので、それぞれ説明していきます。

 

ただ、機種によってはcookieも一緒に消えてしまうので、ログイン情報など削除されたら困るっという方は事前に確認をしておきましょう。

 

Androidのキャッシュ削除

Androidは機種によって見た目が異なるので、必要に応じて読み替えてもらえればと思います。

 

まず、すべてのアプリをタップします。

 

すべてのアプリから「設定」をタップします。

 

設定の中から「アプリ」をタップします。機種によっては「アプリケーション」となってる場合もあります。

 

するとデフォルトで「ダウンロード」のタブが表示されるので、スワイプして「すべて」に移動します。

（機種によっては、スワイプではなく「すべて」のタブをタップします）

 

 

すべてのアプリケーションの中からブラウザをタップします。

 

キャッシュの項目にある「キャッシュを削除」のボタンをタップします。

 

タップ後、「キャッシュを削除」ボタンが非アクティブになったら終了です。

 

iPhoneのキャッシュ・cookie削除

「設定」をタップします。

 

設定の中から「Safari」を選択します。

 

Safariの中から「履歴とWebサイトデータを消去」をタップします。

 

すると、ダイアログが表示されるので、「履歴とデータを消去」をタップします。

（キャッシュだけではなく、cookieも削除されます）

 

「履歴とWebサイトデータを消去」が非アクティブになったら完了です。

 

まとめ

キャッシュやcookieは、普通のブラウジングで蓄積していくのでそれなりにストレージを費やします。

 

最近のPCはスペックがいいのでそれほど気にならないかもしれませんが、スマホの場合ずっと保持していると動作が重くなったりします。

 

表示崩れの解消だけでなく、日ごろのメンテナンスとして、定期的に実行することをオススメいたします。