devicePixelRatio

コンテンツ(img)の1pxを、実機上で何pxとして描画するかを示すもの。

ex)

/*@1x*/
.className {
    width: 100px;
    height: 100px;
    background: url([email protected]);/* 等倍サイズの画像 */
}

/*@1_5x*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    .className {
background: url([email protected]); /* 1.5倍サイズの画像 */
-webkit-background-size: 100px 100px; /* WebKit */
background-size: 100px 100px; /* WebKit以外 */
    }
}

/*@2x*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .className {
background: url([email protected]); /* 2倍サイズの画像 */
-webkit-background-size: 100px 100px; /* WebKit */
background-size: 100px 100px; /* WebKit以外 */
    }
}


* * *
iPhoneでは、3Gまでで使ってたimgサイズを1倍とすると 4以降が2倍、
Androidでは機種によって違うが 概ね1.5倍
となっているため、こういった振り分けが非常に役立つ。

参考:
http://www.u-ziq.com/blog/2011/08/devicepixelratio.html
http://www.mdn.co.jp/di/articles/2434/?page=7
http://www.webcyou.com/?p=396
最終更新:2011年11月08日 15:14