iPhoneのsafariで表示中のWebページの向きを横に変えると、解像度が拡大してしまう件

現在開発中のアプリをiPhoneで表示させる時にハマったんで備忘録。

iPhoneのsafariで表示中のWebページの向きを横に変えると、解像度が変わって画面が拡大してしまう(ように見える)。
どうやらこれはsafariのバグらしいんだけど、みなさん混乱していらっしゃるようで対応策がマチマチ。
書いてあるように対応しても、うまくいかなかったりしたり。
バージョン違いのせいかな?
情報が溢れてると、逆に正しい情報を見つけるのに苦労する。
と、言うわけで更に情報を増やしてみたりw

 
さて、本題。

 
Bootstrapには、元々上記の問題のための対応が入っているらしく、
サンプルソースに以下の記述がなされている。

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 
ところが、これだけだとうまくいかない。
上記の対応をすればいいよ。と、書かれているサイトも多く、なぜうまくいかないのか悩む事1時間。
似たような記事を読み漁っていると、こんな事が書かれているサイトが!!

 

またmaximum-scaleを指定しないと、widthを指定しても有効にならないっぽいです。

 
何っ!?widthが有効にならない?

 
と、言う事で「maximum-scale=1.0」を追加したトコロ、無事に拡大されなくなりました。
なお、最終的なviewportの指定はこちら。

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

 
ちなみに、各設定値の説明はコチラ。

 

width=device-width デバイスの横幅に合わせて描画
initial-scale=1.0 ページが最初に読み込まれるときの拡大率を1倍に指定
maximum-scale=1.0 ユーザーが操作可能な拡大率の上限を1倍に指定
user-scalable=yes ユーザーの拡大縮小指定を可能に

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL