WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（2/2 ページ）

iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。

[山田　直樹，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

メディアクエリ―高精細ディスプレイに対応させるには

-webkit-device-pixel-ratioについて

　先のデバイスピクセル比（device pixel ratio）の項目でも解説しましたが、高精細ディスプレイ向けにCSSで対応するにはメディアクエリ（Media Queries）を使うわけですが、その際の条件式に用いられるのが、「-webkit-device-pixel-ratio」というものです。Retinaディスプレイ搭載のiOS端末を例に取ってみましょう。

　Retinaディスプレイのデバイスピクセル比は「2」です。つまり、デバイスのピクセル密度の最低値が2の場合のみスタイルを適用するというメディアクエリを指定すれば良いわけです。

@media (-webkit-min-device-pixel-ratio: 2) {
    .class {
        background-image: url(image-2x.png);
    }
}

　と、ここまで解説しておいて何ですが、この-webkit-device-pixel-ratioはもともと、アップルがRetinaディスプレイを開発した際に、WebKitを独自に拡張したものであってW3Cの標準規格ではありません。後に同じWebKitエンジンを搭載しているAndroidやChromeもこれに追従し、現在ではFirefoxならびにOperaもこれに対応していますが、以下のようにベンダプレフィックスが必要であったり値の指定方法が異なるなど、あまり使い勝手が良いとはいえないのが実状です。

@media (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1) {
    .class {
        background-image: url(image-2x.png);
    }
}

resolution

　resolutionもまたピクセル密度を表すものですが、こちらは-webkit-device-pixel-ratioと違ってW3Cで定められた標準規格です。値の指定はdpi、dpcm、dppxの3種類があり、それぞれ以下のような特徴を持っています。

dpi
- 1インチ当たりのドット数を表します。画面でよく使われるのは72または96dpiです。印刷物のdpiは通常これより大きくなります。1インチは2.54cmなので、1dpi≒2.54dpcmです。
dpcm
- 1センチメートル当たりのドット数を表します。1インチは2.54cmなので、1dpcm≒0.39dpiです。
dppx
- ピクセル（px）当たりのドット数を表します。CSSのinchとCSSのpxの比率は1.96で固定なので、1dppxは96dpiと同じです。これはimage-resolutionで定義される、CSSの画像のデフォルトの解像度に一致します。

　主要Webブラウザの対応状況は以下のとおりです。


機能	Chrome	Firefox	Internet Explorer	Opera	Safari（WebKit）	Android	iOS
resolution	☓	3.5～	9～	9～	☓	☓	☓
dpi	☓	3.5～	9～	9～	☓	☓	☓
dpcm	☓	3.5～	9～	☓	☓	☓	☓
dppx	☓	16.0～	☓	12.10～	☓	☓	☓
数字は対応可能なバージョン番号

　WebKit系がことごとく未対応ですが、そっちはdevice-pixel-ratioで指定しておいて、それ以外はresolutionとdppxで指定すれば、ひとまずIE以外をサポートすることができます。dpiならIEでも使うことができますが、device-pixel-ratioの仕様と併せて指定することを考えるとdppxの方が余計に頭を使わなくて済みそうです。

　コードにするとこのような感じです。

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
    .class {
        background-image: url(image-2x.png);
    }
}

　割とスッキリとしたコードになりました。この書き方はW3Cが推奨しているもので、将来性を考えても今後はこちらの書き方で統一するのが良いでしょう。

おわりに

　この辺りはまだ比較的仕様が新しく、各ベンダの実装状況がまちまちであるのもあってか、なかなか整理された情報を見付けるのが難しかったりします。かくいう筆者も、この記事を執筆するに当たって調べていくうちに、どれが正解でどれが古くて使えない情報なのか、理解するのに苦労しました。

　PCの世界では、MacBook ProやWindowsノートPCの一部など、高精細ディスプレイを搭載した環境は非常に限られていますが、モバイル端末ではもはや高精細ディスプレイが当たり前になっています。レスポンシブWebをうたうのであれば、そういったモバイル端末が搭載している高精細ディスプレイへの対応を無視することはできません。

　個人的な意見ですが、Webサイトは表示が速くてナンボだと思います。高精細ディスプレイへの対応は、画像関連をきれいに表示させるのが主になりますが、全環境向けの解像度を生真面目に用意すると、当然表示パフォーマンスにも悪影響を及ぼします。いくらきれいに表示できているWebページでも、その表示に時間がかかるようでは残念でなりません。

　次回は、この辺りを上手く解決するためのノウハウをいくつか紹介したいと思います。

参考サイト

著者プロフィール

山田直樹（やまだなおき）

クラスメソッドではたらくフロントエンド・エンジニア。JavaScript・HTML・CSSによる開発を主な生業とする一方、スタイリッシュかつクールなデザインを何よりも愛していることから、UIデザインを担当することもしばしば。実はプログラムよりも洋服を自作するのが一番得意だったりする。

クラスメソッド開発ブログ山田直樹

WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（2/2 ページ）

メディアクエリ―高精細ディスプレイに対応させるには

-webkit-device-pixel-ratioについて

resolution

おわりに

HTML5＋UX 記事ランキング