メディアクエリ その2

androidでよく使いそうなメディアクエリをもう一つ紹介しておく。
「ポートレイト」か「ランドスケイプ」かをメディアクエリで記述することができるものだ。

android.css

@media screen and (orientation:portrait) {
    body, table td {
    color: white;
    background: fuchsia;
  }
}
@media screen and (orientation:landscape) {
    body, table td {
    color: white;
    background: navy;
  }
}

実行結果 (PC, Chromeにて表示)

その1(ポートレイト)

その2(ランドスケイプ)

メディア(画面)の縦横比により縦長か横長かを調べて、それによりポートレイト(縦長)かランドスケイプ(横長)を判定しているようだ。

実行結果 (Android 2.3.3、エミュレータのWebブラウザにて表示)

その1(ポートレイト)

その2(ランドスケイプ)

このケースでもメディアクエリはAndroid上で正しく動作できているように見える。