勘違いしていたCSSメディアクエリのlandscapeとportrait

18,304views／投稿 2014-12-13／更新 2019-04-30

スマホサイトやタブレットで使うことのある端末を縦や横に持った時のCSSメディアクエリ条件分岐（縦向きportrait、横向き landscape）は、端末からブラウザに何かしらの「今、スマホ端末は縦ですよ」と信号があるものだと思い込んでいました。

しかし正解は、
ブラウザ縦横比が縦長ならportrait、横長ならlandscape

という単なる縦横比でした。要するにスマホやタブレットだけの話ではなくMacやWindowsで使うデスクトップブラウザでもブラウザ枠の縦横比ウィンドウサイズを変更しても適用される条件でした。

試しにこちらのテストページは、ブラウザが縦長ならキリンyellowで、横長ならカメgreenになります。PCブラウザであればウィンドウサイズの比率を変えたり、スマホやタブレットなら縦横持ちを変えてみてください。

CSS3メディアクエリの使い方

やり方は、

@media all and (orientation: landscape) { body {background-color: red;} }

こんな感じで普通のCSSをメディアクエリで挟むだけです。メディアクエリを複数併記できたり、orientationは併記することがあるのか微妙ですがmax/minなど前置詞の可否はそれぞれにあります。

メディアクエリは端末デバイスの状況によってCSSを適用させたりできる便利な条件分岐の機能で、Mozillaのページにいろいろな種類が載っています。
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Media_queries

今回のorientation値: landscape | portraitは単なるブラウザの縦横比なので、aspect-ratioと機能的には同じですね。

@media all and (min-aspect-ratio: 1/1) { ◯◯◯ }
は、これと同じ
@media all and (orientation: landscape) { ◯◯◯ }

実用的なものがあれば、またレポートしたいと思います。