先日当サイトのレイアウトを少し変えてみたら、iOS版のTwiiterブラウザでのみ表示が崩れていることが判明。じゃあ、キャッシュを切ろうと設定画面とか探してみてもキャッシュを切れないんですよね。そういう仕様なのかな。色々と検証した挙句、何とか表示崩れを修正することができましたのでご紹介していきます。何気に同じような問題抱えている人っているんじゃないかな。
iOS版Twiiterブラウザでの表示崩れを修正する方法
初めはWordPressのキャッシュ系プラグインを疑ったんですけど、プラグイン外してもピクリとも動かない。他のプラグインで何か問題ありそうなものを探してみましたが外しても全然ダメ。
でも、MacのChrome、Firefox、Safariでは表示に問題なく、iOS版のChrome、Firefox、Safariでも同様に問題なく表示されている状態でした。あと、iOS版のTweetbotでも全然表示崩れがなく、きれいに表示されているのです。
これはiOS版Twitterアプリのブラウザのみでのキャッシュが原因であろうと考えていたら、同じような問題を抱えていた人を見つけました!
直し方は、単純に外部ファイル化されているCSSのファイル名を変えることです。これで一発で解決しました。
CSSファイル名を変更するだけで直るって。実際に試してみたら、…全然問題なく表示されております。
この修正作業だけで3時間くらいかかってしまったのに、修正時間はたったの1分弱。まぁ、こんなもんですよね。
今回、2日間放置してキャッシュが切れるのを待ったみたのですが全く変わらなかったので検証してみた、という経緯でした。Twitterでは、参照URLを記載するケースが多いからiOS版ブラウザのキャッシュの保存期間が長いのかなと思います。っても長すぎじゃないか。
まぁ、ともあれ無事に修正ができたので良かったです。皆さんの中でもWordPressサイトの部分的な修正のあとに表示崩れが起こったら、CSSファイル名変更を試してみてください。私の場合、この作業をおこなって1時間経過後に以前のCSSファイル名に戻したら問題ありませんでした。新たにキャッシュされたようです。
ちなみに、iOS版のTwitter公式アプリのキャッシュをクリアする方法は、アプリを削除し再インストールするしかないそうです。Androidはできるそうですが。