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

Question

My device (Macbook Pro 2019 16") has a resolution of 3072 x 1920. When entering the realm of CSS, pixel units are "normalized". From my understanding, each CSS pixel is equal to my window.devicePixelRatio in device pixels. In my case, window.devicePixelRatio === 2. If my understanding is correct, this would mean that a CSS grid column with a width of 3072 / 2 = 1536px should take my entire viewport width. Surprisingly this is not the case: the actual viewport with is 1792px.

If I divide my screen width by the viewport width, this gives me a "real" device to css pixel ratio of 3072 / 1792 = 1.7142857142857142. Why is this not returned by window.devicePixelRatio?

To make matters more confusing, when I take a screenshot with Chrome's API, it gives me a screenshot with width 3584px. Weirdly, all these numbers somehow seem to come together: (3584px * 1.7142857142857142) / 2 = 3072px which is my real device width. How does this make sense?

Finally, is there a way to get to 1.7142857142857142 programmatically?

Answer 1

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

因此，您注意到的不一致是由于 Mac 处理缩放分辨率的方式造成的。基本上，在 Macbook 上， 的值window.devicePixelRatio不会准确反映，而是针对不同的屏幕分辨率显示1或。2

看一下chromium 的bug 线程，其中正在讨论相同的问题。

另外，1792px您注意到的视口是由于您提到的特定 Macbook 型号的屏幕分辨率而导致的，该分辨率将该分辨率列为1792x1120支持的分辨率，我假设您正在使用该分辨率。

devicePixelRatio我还在我的 Macbook 上对此进行了测试，并看到所有缩放分辨率给我的相同结果2，并且必须转到我得到的所有分辨率1

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