スマホの縦向きと横向きで文字サイズを勝手に変更させない方法
レスポンシブサイトを制作した時、スマホで表示確認をすると、デバイスの縦向きと横向きのときで文字サイズが勝手に変更されるのに気が付くかと思います。
スマホを縦向きから横向きに変えると、文字サイズが縦向きの時よりも大きくなるのです。

上記は縦向きの時、下記が横向きにした時の画像です。

横向きの方が、文字サイズが大きくなっているのが分かるかと思います。
スマホとしては良かれと思ってやっているのかと思いますが、正直なところ文字サイズが勝手に変わると、文章がちょっと読みにくいと感じることも・・・。
今回はスマホの縦向きと横向きとで勝手に文字サイズを変更させない方法をご紹介します。
方法は簡単でCSSに一行追記するだけです。
以下をCSSに追記しましょう。
body {
-webkit-text-size-adjust: 100%;
}
【body】の記述が既にある場合は、その中に【-webkit-text-size-adjust: 100%;】を追記します。
これだけで、縦向きでも横向きでも文字サイズは統一となります。
実装したらスマホから確認してみてください。
コメントを残す