iOS9でviewportのinitial-scaleが無効になる時の対策

iphone_gesori

げっそりだよ!

iOS8とiOS9とでブラウザの表示が違う

先日のブログ記事をiPhone6で見ると中身が左に寄るんだけど…と言われて見てみたのですが、自分のiPhone6では異常ありませんでした。
OSバージョンを確かめながらキャプチャで見比べました。

ios9_viewport1

寄ってますね。

ios9_viewport2

長いコードの部分で、iOS8.4.1では横スクロールが表示されます。

viewport設定でinitial-scale=1.0が無視されているっぽい

iOS9のSafariでは、初期の画面倍率を無視してページ全体を表示するよう縮小して表示しているようです。

ios9 (β) viewportに不具合か!?
ios 9 Safari / Web App Viewport Problem (expands to fit all elements in view)

同じように困っている報告も上がっています。

回避策

先ほどのスレッドでも紹介されている "shrink-to-fit=no" をviewport設定に加えました。

これで読み込み時に横スクロール部分は無視してiOS8と同じ見た目になりました。

それとコードが長くて読み辛い部分は、コード表示プラグインを「SyntaxHighlighter Evolved」からインラインフレームに対応した「Crayon Syntax Highlighter」に変更しました。

これでしばらくなんとかなりそう。

Pocket

The following two tabs change content below.
Yuko Hashimoto

Yuko Hashimoto

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。