为什么我的设备分辨率/devicePixelRatio 不等于我的 CSS 视口宽度？

Question

我的设备（Macbook Pro 2019 16"）的分辨率为3072 x 1920。当进入CSS领域时，像素单位被“标准化”。根据我的理解，每个CSS像素等于我的设备像素中的

window.devicePixelRatio

。就我而言，

window.devicePixelRatio === 2

。如果我的理解是正确的，这意味着宽度为

3072 / 2 = 1536px

的 CSS 网格列应该占据我的整个视口宽度。令人惊讶的是，情况并非如此：实际的视口是

1792px 

.

如果我将屏幕宽度除以视口宽度，这会给我一个“真实”设备与 CSS 像素比

3072 / 1792 = 1.7142857142857142

。为什么

window.devicePixelRatio

不返回这个？

更令人困惑的是，当我使用 Chrome 的 API 进行屏幕截图时，它给我的屏幕截图宽度为

3584px

。奇怪的是，所有这些数字似乎都以某种方式组合在一起：

(3584px * 1.7142857142857142) / 2 = 3072px

，这是我的真实设备宽度。这有什么意义？

最后，有没有办法以编程方式到达

1.7142857142857142

？

Answer 1

这是一个有趣的问题，我最终陷入了关于像素和显示的兔子洞。

因此，您注意到的不一致是由于 Mac 处理缩放分辨率的方式造成的。基本上在 Macbook 上，

window.devicePixelRatio

的值无法正确反映，并且针对不同的屏幕分辨率显示

1

或

2

。

看看这个 bug thread for chromium，其中正在讨论相同的问题。

此外，您注意到的

1792px

视口是由于您提到的特定 Macbook 型号的屏幕分辨率而导致的，将分辨率

1792x1120

列为 支持的 分辨率，我假设您正在使用该分辨率。

我还在我的 Macbook 上进行了测试，看到了相同的结果，所有缩放分辨率都给了我

devicePixelRatio

的

2

，并且必须转到我得到

1

的所有分辨率

就尝试以编程方式识别确切的屏幕分辨率和缩放比例而言，我认为这在网络中是不可能的。