Webデザインやレスポンシブデザインに携わる方なら、orientationというメディアクエリに出会ったことがあるでしょう。一見すると「デバイスの向きを判定する」ように思えますが、このメディアクエリの真の意味は少し違います。
orientation: portraitやorientation: landscapeは、実際にはブラウザのviewportが「縦長か横長か」を基に判定しています。つまり、デバイスの物理的な向きやディスプレイの向きとは関係ありません。
例えば、ブラウザのウィンドウを縦に長くして、orientation: portraitの条件を満たすようにした場合、そのメディアクエリはマッチします。同様に、ウィンドウを横に長く広げればorientation: landscapeがマッチします。
この性質を理解していると、ユーザーがウェブページをどのように閲覧しているかに応じて、より適切なスタイリングやレイアウトの調整が可能となります。しかし、デバイスの物理的な向きに基づくスタイリングを行いたい場合は、別の手法を検討する必要があります。
Comment