HTML

iPhone や Android のブラウザーで横向きの時に文字が大きくなる場合の対処方法

iPhone や Android のブラウザーで横向きの時に文字が大きくなる場合の対処方法を紹介します。
例えば、横向きの時でも指定した文字サイズにしたい時に便利な方法です。

  1. iPhone や Android のブラウザーで横向きの時に文字が大きくなる原因
  2. iPhone や Android のブラウザーで横向きの時に文字が大きくなる場合の対処方法

iPhone や Android のブラウザーで横向きの時に文字が大きくなる原因

iPhone や Android のブラウザーには、画面の縦向きと横向きで文字サイズを自動で調節してくれる機能があります。
そのため、文字サイズを縦向きで調整した場合でも、横向きにした時に文字サイズが変わってしまいます。

iPhone や Android のブラウザーで横向きの時に文字が大きくなる場合の対処方法

画面が横向きの時でも共通した文字サイズにしたい時は -webkit-text-size-adjust: 100%; を指定します。

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

まとめ

iPhone や Android のブラウザーで横向きの時に文字が大きくなる場合の対処方法を紹介しました。

合わせて読みたい関連記事