UZIQ

スマートフォンでは機種によって解像度がことなるのは周知のとおり。
100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。

スマートフォンの解像度は横幅320pxを標準として480px、640pxと主に3種類の違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。

/* devicePixelRatio=1（iPhone3～3GS）とdevicePixelRatio未対応ブラウザ */

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

/* devicePixelRatio=1.5 （Android系に多い）*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

     .className {
          background: url(image@1.5x.png); /* 1.5倍サイズの画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}

/* devicePixelRatio=2 （iPhone4）*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

     .className {
          background: url(image@2x.png); /* 2倍サイズの画像 */
          -webkit-background-size: 100px 100px; /* WebKit */
          background-size: 100px 100px; /* WebKit以外 */
     }
}

Tweet

Related entries