@mediaのorientationはviewportの縦横がどっちが長いかであって、デバイスが縦か横かじゃないですよ

まさかの連日更新という事態に自分で驚いています。昨日が妄想垂れ流しで長かったので、今日は短めに。

body{
  background: white;
}

@media (orientation: portrait){
  body{
    background: blue;
  }
}

@media (orientation: landscape){
  body{
    background: red;
  }
}

さて、上記のようなCSSを読んだページがあったとしてbodyの背景は何色になるだろうか?

デスクトップブラウザ(横長画面)では背景はwhite、スマホやタブレットで縦の時は背景がblueで横の時はred、となると思ったら 全然違う。"デバイスの向きを判定する" と思われがちなorientation: portrait | landscapeは、本当の所はブラウザのviewportが「縦長か横長か」で判定されるメディアクエリーだ。 仕様書でも「デバイスの向き」とは言っていない。だからデスクトップでもネットブックでも、ブラウザのウィンドウを縦長にしてたら背景はblueになるし、横長にしてたらredになる。そして上記の書き方だとCSSのメディアクエリに対応してるブラウザでは背景がwhiteになることはない。

しかもviewportの縦横が同じピクセルの時はorientation: portrait扱いになる。仕様にも

'portrait' when the value of the 'height' media feature is greater than or equal to the value of the 'width'

としてちゃんと書いてある。これは portrait で使うアプリでは、ロケーションバーとかツールバーが上下にあってviewportが縦に狭められて正方形になることもあるだろうっていう解釈でそうなってるのだろうか。

orientation: portrait | landscapeのCSSメディアクエリはiOS Safariは4.2から、Androidの標準ブラウザで3.0から使えるが、デスクトップブラウザでは かなり早いバージョン(Google Chromeでは7.0から、Firefoxも3.6から)から動作する。

ということで、orientationで分岐するのはちょっと注意が必要だよ、という話。このメディアクエリーを使って本文エリアの文字サイズを変えているブログがあって、デスクトップで見ているのにいかにもタブレットで表示したサイズ感になっていたのが気になった。