2

iPhone 6 の解像度は1334x750pxですが、CSS の幅は375pxです。

私が知りたいのは、画像の幅を 750 ピクセルにして、CSS または HTML で幅を 375 ピクセルに設定した場合、ネイティブの 375 ピクセルの画像よりもシャープに見えるでしょうか?

4

1 に答える 1

3

はい、ブラウザが HiDPI をサポートしている場合はそうです。これは iOS の Safari に当てはまります。CSS ピクセルは CSS レイアウトの計算にのみ影響します。イメージのレンダリングには影響しません。

これは、私の言いたいことを示すために、iOS シミュレーターの Safari でまとめてテストした簡単なデモです。500x250 の画像は 250x125 の画像よりもシャープに見えますが、どちらも CSS ピクセルで同じサイズです (div比較のために青色を使用)。

<!DOCTYPE html>
<meta name=viewport content="width=device-width">
<style>
img { display: block; margin: 1em 0; }
div { width: 250px; height: 125px; background-color: blue; }
</style>
<div>250x125 CSS pixels</div>
<img src=http://placehold.it/500x250 height=125 width=250 alt=HiDPI>
<img src=http://placehold.it/250x125 height=125 width=250 alt=Regular>

于 2015-04-10T04:09:16.597 に答える