为什么我的显示分辨率与 screen.width * devicePixelRatio 不同？

Question

在devicePixelRatio上的MDN 文档中，它说：

(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。

...所以我希望我的显示水平分辨率为：

window.devicePixelRatio * window.screen.width = 2 * 1792 = 3584

... 但不是。 我的显示器水平分辨率是 3072。

这是为什么？

Answer 1

在我看来，规范在这里不够准确。

(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。

它应该是这样的：

(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际 CSS 像素来绘制单个 CSS 像素。

因为那些“实际像素”实际上并不是真实的。 没有双关语的意思。

我找到了一个类似问题的绝佳答案，但我不喜欢“你不需要它”的言论。 TL;DR - 浏览器这样做主要是出于遗留原因。

此外，我在w3c github上发现了一个关于“解决实际物理尺寸的能力”的巨大话题，在 CSS 中，但无论如何。 而且有这么多“咩，没那么简单……你知道……”的消息。 我喜欢这个：“对于什么是 px 没有明确的概念”。

事实证明，实际上你可以获得真正的纵横比。 至少它对我有用。 我有一台 15 英寸显示屏的 MacBook。 实际分辨率为2880x1800 。 在设置中，我的分辨率为1680x1050 （ window.screen所依赖的分辨率）。 真正的纵横比是1.6 ，而不是2 (hello window.devicePixelRatio) 。

MediaTrackConstraints 的 aspectRatio 属性返回实际的纵横比：1.6。

const [track] = (await navigator.mediaDevices.getDisplayMedia()).getVideoTracks();
console.log(track.getSettings().aspectRatio);

但是有一个很大的警告，整个“Media Stream API”是关于从屏幕上捕获视频的，这就是为什么你必须获得权限才能工作。 除了这个，我找不到任何能返回真实纵横比的东西。

这就是我在一个小时左右找到的所有内容，我希望有足够的信息来得出一些结论。