CSS3 Media Queries と Media types 併用時の Opera Mini 向け注意点

投稿

ウェブはPCやゲーム機、携帯電話といったディスプレイサイズの違いのほか、印刷、音声読み上げなどさまざまな出力媒体が存在しますが、CSS2ではMedia types（メディア型）(W3C)によってコンピュータ画面用の screen、印刷用の print など、10のメディア型（すべての環境に適用される all を含む）が規定され、モバイルや印刷時は別のスタイルを適用するといったことが可能になっています。

CSS3では、これを拡張したMedia Queries（メディアクエリー）(W3C)があり、メディア型に加えて解像度などさらに詳細な条件を設定することができます。

たとえば、右側にfloatさせたサイドバーを、スマートフォンのような小さい画面（幅480px以下を想定）で解除するスタイルにしたい場合は次のように書くことができます。

@media screen and (max-width:480px) {
  div.sidebar {
    width: auto;
    float: none;
  }
}

しかし、メディア型のみの指定と併用すると、Opera Mini(jp.opera.com)で意図したスタイルにならないことがあるようです。

メディア指定無しを含めた3種類の指定を行った例で説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width"/>
<title>メディア型とメディアクエリー併用テスト</title>
<style>
p {
  color: #00f; /* 文字色青 */
  background: #fff; /* 背景白 */
}

@media handheld {
  p {
    color: #060; /* 文字色緑 */
  }
}

@media screen and (max-width:480px) {
  p {
    color: #f00; /* 文字色赤 */
  }
}
</style>
</head>
<body>
<p>この文字は何色になるでしょう?</p>
</body>
</html>

これをPC用ブラウザ（表示幅480px以上）で表示させると、p要素の文字色は青になります。handheld や max-width:480px の指定は適用されないので当然ですね。

また、スマートフォンを使ってOpera MobileやAndroid版Firefoxなどで表示させると赤になります。

  • ちなみに、これらはhandheld型の指定を無視するので、handheld と max-width:480px の記述順序を逆にしても赤のままです。

一方、Opera Miniはscreen型とhandheld型の両方が適用されるので、後に指定した赤になるかと思いきや、なぜか緑になってしまうのです。handheldの記述を削除すると赤になるので、メディアクエリーの記述が単に無視されるという訳ではなく、メディア型とメディアクエリーを併用した場合の不具合かと思われます。

ガラケー向けにhandheldの記述を残しつつ、スマートフォン対応としてメディアクエリーを追加するような場合は、標準ブラウザだけでなくOpera Miniでの表示に問題ないかチェックした方がよいかもしれません。