html - 视网膜 - 设备像素比和图像大小之间的相关性？

Question

我不太明白 window.devicePixelRatio 值是什么，以及它如何决定该设备需要什么尺寸的图像(2x、3x 等)。

例如，在 iMac 5K Retina(2015 年末)上，我预计像素比至少为 3 左右，但实际上是 2，与 iPad Air 和 iPhone 6s 相同。这是否意味着它更喜欢 2x 位图？ 3 倍？

Answer 1

devicePixelRatio 是给定设备上物理 像素与设备无关 像素(凹陷)之间的比率。您可以将下降视为显示器“表现”的样子。

例如:非 Retina 27"iMac 的宽度为 2560 个物理像素。所有内容均以 1:1 显示，因此它的宽度也是 2560，因此 devicePixelRatio 为 1 。

在视网膜 27"iMac 上，宽度为 5120 个物理像素。但显示器“表现”为只有 2560 像素宽，因此所有显示的物理尺寸都与非视网膜 iMac 相同。因此，它是仍为 2560 宽，因此 devicePixelRatio 为 2 (5120/2560)，您将提供 2x 图像。

(您可以查看您的系统的倾角值是多少 - 如果您有视网膜显示器 - 通过转到系统偏好设置 > 显示 > 显示并将分辨率切换切换到缩放，然后将鼠标悬停在不同的选项上。对于默认，在 5K iMac 上，它会说“看起来像 2560 x 1440”)。