javascript - "resolution"媒体查询引用实际屏幕

Question

我正在尝试使用“分辨率”媒体查询来确定屏幕的实际 DPI。

我正在做的代码是这样的:

window.matchMedia(`(resolution: ${value}dpi)`).matches

但我发现在不具有相同 DPI 的两个不同设备上，此查询为真的 value 为 96。例如，在一台机器上，实际 DPI 是 157。window.devicePixelRatio 在这两台机器上都等于 1。在第三台设备上，实际 DPI 是 215，但上面的查询告诉我它是 192(正好是 96 的两倍)，window.devicePixelRatio 是 2。

我见过看起来像“@media”或“@media screen”的 CSS 媒体查询，但如果我将其中任何一个放在我传递给 matchMedia 的字符串中，它永远不会出现 no不管值(value)是多少。但我觉得我一定遗漏了一些东西，因为规范说分辨率要与屏幕的实际分辨率相匹配，而我从未见过这种情况发生。

Answer 1

CSS <resolution>单位基于 CSS 单位，而不是实际物理尺寸。

因此，如果我们忘记 DPI 是一个打印单位这一事实，那么当它与屏幕相关时，它应该被称为 PPI，<resolution>不会显示给你。

反而这个单位真的有多少pixels per CSS inch (其中 pixel 是显示器的最小物理点)，并且 CSS inch定义为 96px (其中 px 是神奇的 CSS 单元，而不是任何物理事物)。

所以你这里只有devicePixelRatio * 96 ，并且不会为您提供有关屏幕物理密度的任何信息(这需要您的浏览器知道显示器的实际物理尺寸，这是不可能的，因为您可以使用光束投影仪作为显示器这一简单事实)。