Media Type, Media Query の実験

MediaType, MediaQuery の対応状況テスト

  • ※スタイルが有効な項目は文字色が赤く、無効な項目はグレーになります。
  • @media句
    • all
    • screen
    • print
    • handheld
    • tv
    • (min-width:400px)
    • all and (min-width:400px)
    • screen and (min-width:400px)
    • print and (min-width:400px)
    • handheld and (min-width:400px)
    • tv and (min-width:400px)
    • (max-width:399px)
    • all and (max-width:399px)
    • screen and (max-width:399px)
    • print and (max-width:399px)
    • handheld and (max-width:399px)
    • tv and (max-width:399px)
  • @import句
    • all
    • screen
    • print
    • handheld
    • tv
    • (min-width:400px)
    • all and (min-width:400px)
    • screen and (min-width:400px)
    • print and (min-width:400px)
    • handheld and (min-width:400px)
    • tv and (min-width:400px)
    • (max-width:399px)
    • all and (max-width:399px)
    • screen and (max-width:399px)
    • print and (max-width:399px)
    • handheld and (max-width:399px)
    • tv and (max-width:399px)
  • styleタグ+media属性
    • all
    • screen
    • print
    • handheld
    • tv
    • (min-width:400px)
    • all and (min-width:400px)
    • screen and (min-width:400px)
    • print and (min-width:400px)
    • handheld and (min-width:400px)
    • tv and (min-width:400px)
    • (max-width:399px)
    • all and (max-width:399px)
    • screen and (max-width:399px)
    • print and (max-width:399px)
    • handheld and (max-width:399px)
    • tv and (max-width:399px)
  • linkタグ+media属性

MediaTypeとMediaQueryへのブラウザ別対応状況

どんなブラウザが、どんなメディアタイプを持っているかを調べた記録をまとめた。

ブラウザ/端末 メディアタイプ メディアクエリ @media句 @import句+メディア指定 styleタグ+media属性 linkタグ+media属性
Internet Explorer 6~7 screen, 印刷時 print × × × ×
Internet Explorer 8 screen, 印刷時 print × × ×
Opera 11 screen, 印刷時 print, handheldモード時 handheld, tvモード時 tv
Google Chrome screen, 印刷時 print
Firefos 3.6.13 screen, 印刷時 print
Safari 5 screen, 印刷時 print
iPhone (Mobile Safari) screen
PSP-3000 screen (メディアクエリをつけると無視される) × (メディア指定を無視し、無条件にロードされる)
PLAYSTATION 3 screen × (メディアクエリをつけると無視される) × (メディアクエリをつけると常にロードされる) (メディアクエリをつけると常にロードされる)
Nintendo DSi (Opera) 通常表示時 screen, タテ長表示時 handheld
Nintendo Wii (Opera) tv
auケータイ(W43CA/2006年8月28日発売) PCサイトビュワー(Opera) 通常時 screen, スモールスクリーンモード時 handheld (メディアクエリを付加すると、異なるメディアタイプ向けの指定がロードされることがある。メディアタイプのみの指定ならOK)
auケータイ(beskey(HIY02)/2010年6月4日発売) PCサイトビュワー(Opera) 通常時 screen, スモールスクリーンモード時 handheld
Softbank(911T/2007年3月17日発売) ケータイブラウザ(NetFront) handheld × (メディアクエリをつけると無視される) (メディアクエリをつけると無視される) (メディアクエリ部分が無視され、メディアタイプ部分のみで該当する場合にロードされる) (メディアクエリ部分が無視され、メディアタイプ部分のみで該当する場合にロードされる)
DoCoMo(SH-07B/2010年5月28日発売) ケータイブラウザ(NetFront) handheld × (メディアクエリをつけると無視される) (メディアクエリをつけると無視される) (メディアクエリ部分が無視され、メディアタイプ部分のみで該当する場合にロードされる) (メディアクエリ部分が無視され、メディアタイプ部分のみで該当する場合にロードされる)
  • ※Internet Explorer 6~8 では、linkタグ+media属性の指定で、print CSS を指定できた実績があるが、なぜかこのテストでは無効になっている。現在のところ原因は不明。

その他、MediaType・MediaQuery に関する端末別の注意事項

viewportは全部のUAに出してはいけない

viewport を出力すると、次の環境で、handheldモードになれなくなる。

  • auのケータイの Opera Mobile
  • Nintendo DSi の Opera

viewportは、JavaScriptでUAを判断し、WebKit系の端末にのみ出力するのがよい。

<script type="text/javascript">
if( navigator.userAgent.toLowerCase().indexOf('webkit')>0 ){
	document.write('<meta name="format-detection" content="telephone=no" />');
	document.write('<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=0; maximum-scale=10;" />');
}
</script>

MediaQuery 指定時に、MediaTypeを省略した場合の扱い

次のように、MediaType部分を省略した上でMediaQueryを指定した場合、通常は、all が省略されたものとして処理されるようだ。

@media (max-width:490px){    }

しかし、次の端末では screen が省略されたものとして処理された。

  • Nintendo DSi の Opera

必ず all and (***) と明示的に書いた方がよさそうだ。

@media all and (max-width:490px){    }
  • ※特に気にしてみていなかったので要再調査だが、@media句と@import句では screen が省略されたことになっているが、styleタグとlinkタグのmedia属性では、all が省略された扱いになっている? のかも知れない。

PSP-3000 の @import に対する挙動

PSP-3000 は、@import に付けたメディアタイプやメディアクエリを無視し、無条件に読み込んでしまう性質(バグ)がある。

プロフィール

コヤナギ トモヤ

ウェブ系エンジニアしてます。ウェブデザイナー、ウェブディレクターとしてウェブ制作の仕事に携わり、今はエンジニア職に流れ着きました。誰かのお仕事をちょっとだけ効率化するような支援ツールの開発が好き。オープンソースとMITライセンス大好き。人生後半は自由と民主主義のコントリビューターとして過ごす予定。

ウェブ制作支援ツール Pickles 2 をオープンソースで開発しています。

PHP/JavaScript/NodeJS/nwjs/Laravel/Pickles2/オープンソース/心理学/倫理/自由と民主主義

RSSフィード

  • このサイト https://www.pxt.jp/ は、 コヤナギ トモヤ の個人サイトです。
  • 個人的な主張や、活動の記録などを掲載しています。 所属する企業、団体、その他の意見や立場を代表するものではありません。
  • 掲載された内容は古くなっている可能性があります。 特に古い記事では、現在の筆者の考えと異なる主張をしていることがありますが、記録としてそのまま残しております。 予めご了承ください。
ページの先頭へ戻る