レスポンシブサイトを構築する際、画面の幅を検知してスタイルを適応していますが、スマートフォンやタブレットの横向きレイアウトを作っている時など、どうしても画面の幅だけでは表現に困ってしまう場合があります。
そんな時、スマートフォンやタブレットを横向きの時だけや縦向きの時だけスタイルを指定することができるメディアクエリ指定の方法がありましたのでご紹介します。

メディアクエリの指定でデバイスの向きを検知

デバイスが横向きの場合

メディアクエリ orientation でビューポートの向きを指定します。値は landscape です。

デバイスが縦向きの場合

メディアクエリ orientation でビューポートの向きを指定します。値は portrait です。

orientationは画面が「縦長」か「横長」を判別

orientation は画面の縦の長さ（height）か横の長さ（width）どちらが長いかを判別しています。画面の向きそのものを判別しているわけではないようです。「縦長」か「横長」のみの判別なのでこの条件に画面サイズを追加した方が使い勝手が良いかと思います。

条件に画面サイズも追加できる

メディアクエリは画面サイズも検知できるので、上記の orientation と合わせることで、画面の向きが横向きかつ横幅は1024px以下の場合といった条件を追加できます。追加情報は and で画面サイズの条件を追記するだけです。

デバイス横向きで 画面の横幅が 1024px 以下の場合のスタイルを記述

デバイス横向きで 画面の横幅が768px以上 1024px以下の場合のスタイルを記述

まとめ

レスポンシブサイトを構築する際、画面サイズのみで制作していると、たまにタブレットの横向き時にどうしてもうまくレイアウトできなかったり、意図しないレイアウト崩れがおこったりする場合があります。そんな時この記述方法で、スマートフォンやタブレットの横向き時のレイアウトに柔軟に対応できます。