javascript - 如何读取浏览器的媒体功能？

Question

对于media queries定义了许多媒体功能。

我想在 JavaScript 中读取浏览器的实际媒体功能值。我怎样才能做到这一点？

需要明确的是，我不想知道某些媒体查询是否匹配。例如，我想知道屏幕的物理宽度。与此类似的东西:

let width = window.getMediaValue("device-width", "cm");

Answer 1

每个设备都有自己的 dpi，JavaScript API 无法提供比 devicePixelRatio 更精确的信息。

devicePixelRatio Window 界面给你一个比例指示渲染的页面是否应该缩放。

浏览器假定 devicePixelRatio 为 1 表示 96 dpi。我在自己的 17.3 英寸屏幕上进行了测试:

Math.sqrt(Math.pow(window.outerWidth / 96, 2) + Math.pow(window.outerHeight / 96, 2));

但它给了我 18.92 英寸，这是错误的。

然后我用了 online equation solver找出我屏幕的真实 dpi，它实际上是 105。

确实是我电脑上的结果

Math.sqrt(Math.pow(window.outerWidth / 105, 2) + Math.pow(window.outerHeight / 105, 2));

输出17.3