みかづきブログ その3

3ヶ月つづけてみました。

Mobile Safariのランドスケープ表示(横向き)でページを拡大しないようにする

iPhoneは本体を横向きにしてランドスケープ表示にすると、Mobile Safari の表示が拡大します。
今回はこの機能をOFFにする方法をまとめます。


テキストの拡大をOFFにする

body {
  -webkit-text-size-adjust: 100%;
}

または、

body {
  -webkit-text-size-adjust: none;
}

とCSSで設定すればOKです。

ただし、noneにしてしまうとPCで観覧した際の拡大(Macであれば command + +)で拡大した際にもテキストのサイズが変わらなくなってしまうので、

-webkit-text-size-adjust: 100%;

のほうがお勧めです。


テキスト以外の拡大をOFFにする

<meta id="viewport" name="viewport" content="width=device-width, maximum-scale=1" />

などなど、メタタグでスケールが1倍より大きくならないように設定すれば防ぐことができます。ユーザーのピンチによる拡大も同時にできなくなってしまいます。



今回は以上です。