スマートフォンで解像度ごとに最適な画像サイズにする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; backgr
![スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0cac4dbbb4891c3f2952438d46fe211c1134544/height=288;version=1;width=512/https%3A%2F%2Fwww.u-ziq.com%2Fwp-uziq%2Fwp-content%2Fuploads%2F2023%2F07%2Fsite-icon-uziq.png)