Retina+高精細ディスプレイ用のCSS指定まとめ

Retinaディスプレイで画像を綺麗に表示させるためには、PCの倍のサイズの画像を用意して、何かしらの策で分岐して表示しなければなりません。
今回はCSSで分岐する場合に利用する指定について調べました。

CSSでの指定

@media only screen and (-webkit-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 2dppx) {
  .xxx {
    background-image: url(../images/common/xxx.png);
    background-size: 60px;
  }
}

それぞれの指定の意味

@media only screen and (-webkit-min-device-pixel-ratio: 2)

Retinaディスプレイ用の指定です。

(-webkit-min-device-pixel-ratio: 1.5)

Androidの構成最画面も含めた指定です。

(min-resolution: 2dppx)

WebKit系以外のブラウザも含めた指定です。

参考：WebページをRetina対応させるテクニック～基礎知識編
スマホ向けのビューポートとメディアクエリーまわりのメモ