iPhone版ツィッター純正アプリ内蔵ブラウザの挙動が変なときは・・・
またまた釣りネタでは無い投稿で恐縮です。
ちなみに、このブログを更新した時、ツィッターには自動で書き込みされます。なので、釣り関係フォロワーの皆さんのTL汚ししてることにちょっと心が痛みます。すいません。
フェイスブックは手動なので、釣りネタ以外はタイムラインに出ないように一応気を使っています(・ω・)ノ
そんなわけで本題です。
サイトのリニューアル作業をするさいは、当然PCのブラウザで動作チェックを行います。完成したら、iPhoneのブラウザでも動作確認を行います。
糞IEがノサバッていた時代と違い、今は各ブラウザがちゃんとしてるのでかなり作業が楽になりました♪
で、iPhoneのブラウザ、つまり純正のサファリで正常に表示されることを確認して、できたーーーーーーーーーーーー
って喜んで・・・・
ん?
あれ?
ここで問題発生!
純正ブラウザで見ると正常なのに、ツィッターTLのリンクを踏んでみると、表示が崩れているorz
っていうのを過去に何度も経験しました。
厳密にいうと、ツィッター社純正アプリで、アプリ内蔵のブラウザで表示したときにレイアウトが崩れます。
↑この例で言うと、青字のリンクをタップしてそのまま開いた時です。長押ししてOpen in Safariで開いた時は当然問題ありません。
今回のリニューアルでもその罠にハマった訳です。ツィッターから開くと画像が巨大orz
画像はCSSとJavaScript両方で縮小しているんで、CSSが効いてないのか、それともJavaScriptエンジンの仕様が微妙に違うのか?
後者ならもっと大問題になってるはずなので、きっとCSSの解釈がじゃっかん違うのかな?って漠然と思いつつも、しばらく放置すると治っているんです。
そう、ツィッター内蔵ブラウザはCSSのキャッシュ保存期間が長い?長いというか、リロード機能が無いんで、我々はどーにもできない?
ってことで、前回は微妙なズレだったので自然治癒(キャッシュが消える)を気長に待ってました。
が、今回は画像が巨大に表示されるという致命的なトラブルだったので直しました。
直し方は、単純に外部ファイル化されているCSSのファイル名を変えることです。これで一発で解決しました。
もしかして、ツィッター内蔵ブラウザはエンジン自体が違ってたりして?ってことで一応、ユーザーエージェントを調べてみた結果・・・
- サファリ Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
- ツィッターのブラウザ Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11B554a Twitter for iPhone
- フェイスブックアプリのブラウザMozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Mobile/11B554a [FBAN/FBIOS;FBAV/6.8;FBBV/745892;FBDV/iPhone5,2;FBMD/iPhone;FBSN/iPhone OS;FBSV/7.0.4;FBSS/2; FBCR/"
カテゴリ:PC・スマホ・WEBネタ