みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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倍より大きくならないように設定すれば防ぐことができます。ユーザーのピンチによる拡大も同時にできなくなってしまいます。



今回は以上です。