时间戳

首页 > 解决方案 > 为什么我的显示分辨率与 screen.width * devicePixelRatio 不同？

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

问题描述

在MDN 文档上devicePixelRatio说：

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

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

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

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

这是为什么？

标签： javascriptcssresolution

解决方案

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

(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);

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

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

推荐阅读