スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定
2011年8月31日
スマートフォンでは機種によって解像度がことなるのは周知のとおり。
100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。
スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。
/* devicePixelRatio=1(iPhone3~3GS、低解像度Android端末)と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~4S、高解像度Android端末)*/ @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以外 */ } }
スマートフォンの各端末の解像度やdevicePixelRatioについては下記ページが参考になります。
-
スマートフォン比較表
最新機種から旧機種まで解像度を比較してみることができる -
Android端末のdevicePixelRatio
Android端末のdevicePixelRatioの一覧を掲載してくれている