iPhone 6 的分辨率为 1334x750px但 CSS 宽度为 375px .
我想知道的是，如果我制作一个 750px 宽的图像，但使用 CSS 或 HTML 将其宽度设置为 375px，它看起来会比原生 375px 图像更清晰吗？
最佳答案
是的，如果浏览器支持 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>
关于css - 如果图像的 native 宽度高于 CSS 宽度，那么图像在 HiDPI 设备上看起来会更清晰吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29553083/