メディアクエリ―高精細ディスプレイに対応させるには -webkit-device-pixel-ratioについて 先のデバイスピクセル比(device pixel ratio)の項目でも解説しましたが、高精細ディスプレイ向けにCSSで対応するにはメディアクエリ(Media Queries)を使うわけですが、その際の条件式に用いられるのが、「-webkit-device-pixel-ratio」というものです。Retinaディスプレイ搭載のiOS端末を例に取ってみましょう。 Retinaディスプレイのデバイスピクセル比は「2」です。つまり、デバイスのピクセル密度の最低値が2の場合のみスタイルを適用するというメディアクエリを指定すれば良いわけです。 と、ここまで解説しておいて何ですが、この-webkit-device-pixel-ratioはもともと、アップルがRetinaディスプレイを開発し
![WebページをRetina対応させるテクニック~基礎知識編](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e84fc6ab06f31b2e64248cbfc92fe06deb5bab5/height=288;version=1;width=512/https%3A%2F%2Fimage.itmedia.co.jp%2Fimages%2Flogo%2F1200x630_500x500_ait.gif)