CSSでスマホを横にしても文字サイズを拡大させない方法

スマホを横にした時、文字サイズが大きくなりデザインが崩れてしまうのを防ぐため、
CSSでスマホを横にしても拡大させない方法を紹介します。

なぜ文字が大きくなるのか

まず、なぜ文字が大きくなってしまうのか。
その原因はiPhoneのSafariの初期設定が原因です。

Safariの初期設定でiPhoneを横にすると文字サイズを自動調整する設定がされています。
実際に見てみると、画像サイズや余白はそのままで、文字サイズのみが大きくなってしまいます。
この現象はiPhoneのSafariでのみ発生し、PCやiPadでのSafariでは発生しないようです。

文字を大きくさせないCSS

それでは、早速スマホを横にしても文字が大きくならないよう設定しましょう。
設定は下記のCSSたったの１行でできます。

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

デフォルト値は”auto”になっているため、”100%”にすることで自動調整機能をオフにすることができます。

注意

“100%”ではなく”none”を指定しても自動調整機能をオフにすることができるのですが、
“none”にしてしまうとPCでの拡大/縮小機能が効かなくなってしまうためなるべく”100%”で指定してあげるのが推奨されています。

参考

【CSS3】iOSのサファリで縦画面から横画面にすると文字が大きくなるのを防ぐ設定
-webkit-text-size-adjust: none を絶対に設定してはいけない理由