2

iPhone 6 的分辨率为1334x750px，但 CSS-width 为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 回答