今回は、CSSを使ってスマホを横向きにしても崩れないようにする方法について解説します。

スマホを横向きにすると起きる事象

文字サイズが大きくなる

スマホを横向きにするとテキストが大きくなってしまい、デザイン性が落ちたりレイアウトが崩れたりすることがあります。

解決策

text-size-adjustプロパティ

text-size-adjustは、文字サイズを調整することができるプロパティです。
こちらのプロパティを使用することで、横向きにしたときに崩れを改善することができます。

初期値はauto（自動調整）

初期値はautoで、文字サイズが自動調整されます。

値を100%に指定する

text-size-adjustの値を100%に指定するだけで問題なしです。

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

まとめ

スマホでホームページを閲覧する際、横向きで見る人はマイナーかもしれませんが、横向き時の表示のチェックも怠らずに実装しましょう！