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

げっそりだよ！

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

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

寄ってますね。

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

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

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

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

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

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

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

デザイナー

虚弱と加齢の狭間でよれよれになりながら、使いやすいデザインについて日々ボンヤリと考えています。手芸、園芸、寺社仏閣や博物館が好きです。通信制大学を始めました。