W3G

iPad用メディアクエリの危険

iPad用のメディアクエリとしてよく紹介されているのが次のコードです。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { ... }
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { ... }
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ... }

1行目が縦横両方いけるコードで、2行目が縦置き用、3行目が横置き用ものですが、いずれもXGA(1024×768)の解像度をもつモニターのPC環境にも普通に適用されてしまいます。といっても、この解像度のモニターは一昔前までは多かったのですが、いまでは極少数になってきていることと、この解像度のモニターを常用でご利用になられている方はあまりデジタルそのものに熱心ではない方が多いためブラウザも購入時にインストールされているInternet Explorer 6/7/8（Internet Explorer 6/7/8であればメディアクエリそのものを認識できない）をそのままお使いでいることが多いです。そのため、このメディアクエリの使い方の危険度は★1つです。

Androidタブレット用メディアクエリの危険

1280×800のタブレットは、Androidタブレットでは一番多いサイズです。発売済みの製品名を列挙すると、SHT21（AQUOS PAD）、REGZA Tablet AT500/26F (REGZA Tablet)、ETBW11AA（ビジネスタブレット -TOUGH-）、TBi11M（MOTOROLA XOOM Wi-Fi）、F-01D（ARROWS Tab LTE）、SC-01D（GALAXY Tab 10.1 LTE）、SC-01E（GALAXY Tab 7.7 Plus SC-01E）、SC-05D（GALAXY Note）、Sony Tablet S、N-08D（MEDIAS TAB UL）、N-06D（MEDIAS TAB）、Kindle Fire HDなどなど、Androidタブレットととして普及しているのがほとんどがこのサイズです。そのためAndroidタブレットを対象とした次のコードも非常によく紹介されています。

@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) { ... }
@media only screen and (max-device-width: 1280px) and (orientation: landscape) { ... }

1行目が1280×800のタブレットの縦横両方いけるコードで、2行目がその横置きを目的としたコードです。しかし、これにはSXGA(1280×1024)、QVGA(1280×960) 、WXGA(1280×800, 1280×768)、UWSVGA(1280×600)の解像度をもつモニターのPC環境にも普通に適用されてしまいます。数が多いだけにお客様でメディアクエリをサポートするモダンなブラウザをお使いだと、「あれ、タブレット用の表示になるんですけど...」みたいなことが高い確率で起こり得ます。

すべてのシェアを足すとまだまだかなりの数になるためこのメディアクエリの使い方の危険度は★2つです。

スマフォ用メディアクエリの危険

近年のスマートフォンで発売される端末はどれも高解像度端末です。これら高解像度端末には2種類のピクセルが存在します。それがデバイス・ピクセル（ハードウェア・ピクセル）とCSSピクセルです。前者は物理的な最小単位のピクセルであり、後者はCSSで使う論理上のピクセルの数のことで、デバイス・ピクセルを1インチあたりのピクセル数であるピクセル密度(ppi)で割ったものがCSSピクセルです。デバイスピクセルとCSSピクセルの対応はデバイス・ピクセル比（device pixel ratio）と呼ばれます。このデバイス・ピクセル比が1.5:1、2:1、そして 3:1といった超高解像度端末も発売されています。

まだ仕様にはメディアクエリのメディア特性として取り入れられてはいないのですが、スマートフォン端末のブラウザなどが先攻実装していることから、次のようなデバイス・ピクセル比（device pixel ratio）をスマートフォンを抽出するキーに使われているコードもよく紹介されています。

@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
, only screen and (-o-min-device-pixel-ratio : 3/2)
, only screen and (min--moz-device-pixel-ratio : 1.5)
, only screen and (min-device-pixel-ratio : 1.5) {
	...
}

device-pixel-ratioはまだ先攻実装段階のためベンダープレフィックスを伴う必要があり、これらの(,)カンマつなぎのものはOR指定ですべて、デバイス・ピクセル比が最低1.5 : 1以上であることを指しています。当然、2:1のもの3:1のものもこの指定に入ります。一見、非常に有効なように思えるのですが、タブレットもしかりですが、PC界隈においても、ノートPCではスマートフォンと同じように高解像度な端末が発売されてきています。まだまだ数は少ないですが、MacBook Pro Retinaディスプレイモデルにはじまり WindowsでもIGZOを搭載したノートPCなど、確実に高解像度端末の波は押し寄せてきています。今後発売されていくノートPC端末においても爆発的に増えていくことが考えれます。そのため、このメディアクエリの使い方の危険度は★3つです。

もちろん高解像度用に背景画像だけ入れ替えるなどの使い方をする分には非常に有効なメディアクエリです。問題なのは、このデバイス・ピクセル比だけをキーにしてスマートフォンかどうかを判別する使い方はとっても危険です。