如果图像的原始宽度高于 CSS 宽度，图像在 HiDPI 设备上看起来会更清晰吗？

Question

iPhone6 的分辨率为1334x750px but has a CSS-width of 375px。

我想知道的是，如果我制作一张 750px 宽的图片，但使用 CSS 或 HTML 将其宽度设置为 375px，它看起来会比原始 375px 图片更清晰吗？

Answer 1

是的，如果浏览器支持 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 宽度，图像在 HiDPI 设备上看起来会更清晰吗？

Will images look sharper on HiDPI devices if their native width is above their CSS width?

css

dpi

hdpi

device-width