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

公開日

2012-11-16

タグ

CSS

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

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