代码之家 › 专栏 › 技术社区 › ffxsam

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

pixel-density retina retina-display html

5

ffxsam · 技术社区 · 8 年前

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

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

2 回复 | 直到 8 年前

1

12

daGUY 8 年前

devicePixelRatio 是以下两者之间的比率 身体的 像素和 独立于设备 给定设备上的像素(dip)。你可以把dip想象成显示器的“行为”。

例如:非视网膜27“iMac的物理像素宽度为2560。所有内容都以1:1显示,因此它也有2560个倾斜宽度,因此 分辨比 是 1 .

在你的视网膜27英寸iMac上,宽度是5120个物理像素。但是显示器的“行为”就像它只有2560个像素宽,所以所有东西都以与非视网膜iMac相同的物理尺寸显示。因此,它仍然是2560个凹陷宽度,所以 分辨比 是 2 (5120/2560),您将提供2张图像。

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

2

Marlin Ouverson 8 年前

迄今为止,用于视网膜显示器的图形的标准做法仍然是提供两倍于通常非视网膜大小的图像。

提醒:仅为当前用户的设备大小和分辨率提供所需大小的图像是很好的“带宽卫生”。这方面的解决办法超出了这个问题的范围。