スマホでサイトを閲覧する場合、端末を横向きにすると文字サイズが自動的に拡大されてしまいます。
端末を横向きにすると横幅が拡がるので、文字サイズも大きくなった方が見やすくなります。しかし、せっかくのデザインが崩れてしまう場合があるため、この仕様はなかなかの曲者だったりしますね。
そこで今回は、スマホを横向きにした時に文字サイズが拡大されてしまう現象を、CSSで防ぐ方法を紹介したいと思います。
スマホを横向きにしても文字を拡大させない方法
スマホを横向きにした時に文字を拡大させないようにするためには、CSSに以下を追加してあげます。
body {
-webkit-text-size-adjust: 100%;
}
これでスマホの向きを変えても文字が拡大されなくなります。
ついでに文字のアンチエイリアスを調整
私はスマホサイトを制作する時は、text-size-adjustと一緒にfont-smoothingも指定してあげます。
font-smoothingには、「none」「subpixel-antialiased」「antialiased」の3種類の値が指定できますが、私はいつもantialiasedを指定しています。antialiasedを指定することで、文字がスッキリして読みやすくなります。
body {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
デフォルトはsubpixel-antialiasedで、noneはアンチエイリアスをかけません。
アンチエイリアスというのは、境界線の滑らかさを調整するためのもので、有効な場合は滑らか、無効な場合はギザギザ、と覚えておいて問題ないです。というか、私もそれくらいしか理解していません。
それぞれの値の違いとしては、
- none：ギザギザ
- subpixel-antialiased：普通
- antialiased：細くて滑らか
といった感じでしょうか。ちょっとわかりにくいですが、色々と指定して確認してみてください。
あとがき
本題よりもfont-smoothingの方が長くなってしまいました・・・
スマホ向けにサイトを制作する場合は、text-size-adjustとfont-smoothingはセットで指定してあげるのが良いと思います。