MDN documentationdevicePixelRatio 上写着：
(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。
...所以我希望我的显示水平分辨率为：
window.devicePixelRatio * window.screen.width = 2 * 1792 = 3584
...但没有。我的显示器水平分辨率是 3072。
这是为什么呢？
【问题讨论】：
标签： javascript css resolution
在我看来，这里的规范不够准确。
(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。
应该是这样的：
(devicePixelRatio) 告诉浏览器应该使用多少屏幕的实际 CSS 像素来绘制单个 CSS 像素。
因为那些“实际像素”实际上并不是真实的。没有双关语。
我发现this excellent answer 有一个类似的问题，但我不喜欢“你不需要它”的言论。 TL;DR - 浏览器这样做主要是出于遗留原因。
另外，我在w3c github 上发现了一个关于“解决实际物理尺寸的能力”的巨大主题，在 CSS 中，但无论如何。而且有这么多“嗯，没那么简单……你知道……”的消息。我喜欢这个：“对于什么是 px 没有明确的概念”。
事实证明，实际上您可以获得真实的纵横比。至少它对我有用。我有一台 15 英寸显示屏的 MacBook。实际分辨率为2880x1800。在设置中，我的分辨率为 1680x1050（window.screen 所依赖的分辨率）。真正的纵横比是 1.6，而不是 2 (hello window.devicePixelRatio)。
aspectRatio property from MediaTrackConstraints 返回实际纵横比：1.6。
const [track] = (await navigator.mediaDevices.getDisplayMedia()).getVideoTracks();
console.log(track.getSettings().aspectRatio);
但是有一个很大的警告，整个“媒体流 API”是关于从屏幕上捕获视频的，这就是为什么你必须获得权限才能工作。除了这个，我找不到任何能返回真实纵横比的东西。
这就是我在一个小时左右找到的所有内容，我希望有足够的信息来得出一些结论。 ?
【讨论】：