iOS9のSafariでスマホサイトが縮小表示されてしまって困った!

少し前にリリースしたレスポンシブ対応のサイトで、iOS9にアップデートしたSafariで閲覧すると表示が崩れてしまう事案が発生しました。
iOS8のSafariと、iOS9のChromeでも問題なく表示されていました。

調べたところ、同じような症状を解決したとの記事をすぐに見つけられて無事解決できたので取り急ぎメモ。

目次

  • どんな症状だったか
  • 解決方法
  • まとめ

Advertising

どんな症状だったか

上の画像左のように表示されるのが正解だとすると、画像右のように内容が縮小されてしまっていました。
htmlは簡略化するとこんな感じの内容です。

テキストテキスト

divの背景にCSSで画像を表示(背景画像はdivのサイズより大きい)、その上(divの中)にposition : absolute;で位置指定したテキストを配置していました。

縮小のされ方からして、背景の画像がdivからはみ出している部分が描画はされていないけど主張しているのではないかという推測です。

解決方法

こちらのページを参考にさせていただきました。
iOS9 不具合 (?) CSS・javascript フロントエンド的にはまった点

body{
    position : relative;
    width : 100%;
    overflow-x : hidden;
}

上記のコードを記述で解決したとのことでしたので、早速bodyにCSSを追記。ブラウザをリロードしたところ、見事に縮小表示が直っていました。

追記した3行が全て必要なのか?と思い、試してみたところ、今回私が遭遇した現象では、overflow-x : hidden;だけの記述で縮小表示の修正ができました。

まとめ

諸事情あって強引なCSSの記述が災いしたのだと思います…。反省。

参考サイト

iOS9 不具合 (?) CSS・javascript フロントエンド的にはまった点

Author

すずき のりえ
@planbworks

Webデザイナー / グラフィックデザイナー / エイチレフ合同会社 業務執行社員
コーポレートサイト・リクルーティングサイト、会社案内・入社案内がメインです。最近では医療・福祉系のお客様が多いです。
2015年10月より母校で非常勤講師(DTP)。2017年3月よりお茶のお稽古に通っています(裏千家)。

関連記事