对于media queries，定义了许多媒体功能。
我想用JavaScript读取浏览器的实际媒体功能值。我该怎么办？
要清楚，我不想知道是否某些媒体查询匹配。我想知道例如屏幕的物理宽度。类似于以下内容：
let width = window.getMediaValue("device-width", "cm");
每个设备都有自己的dpi，并且JavaScript API所提供的信息比devicePixelRatio更精确。
devicePixelRatio界面的devicePixelRatio给您一个比率指示是否应缩放渲染的页面。
浏览器假定devicePixelRatio为1表示96 dpi。我已经在自己的17.3英寸屏幕上进行了测试：
Window但是它给了我18.92英寸，这是错误的。
然后我使用Math.sqrt(Math.pow(window.outerWidth / 96, 2) + Math.pow(window.outerHeight / 96, 2));
来找出屏幕的真实dpi，实际上是105。
实际上是在我的计算机上完成的结果
online equation solver
输出17.3
媒体查询是CSS3中引入的，是响应式Web设计的关键要素之一。媒体查询用于确定视口的宽度和高度，以使网页在所有类型的设备上看起来都不错
window.matchMedia（）方法返回一个MediaQueryList对象，该对象表示指定CSS媒体查询字符串的结果。 matchMedia（）方法的值可以是CSS @media规则的任何媒体功能，例如min-height，min-width，orientation等。
您可以使用本机导航器对象获取媒体属性，例如访问网络摄像头，麦克风。例如：-
Math.sqrt(Math.pow(window.outerWidth / 105, 2) + Math.pow(window.outerHeight / 105, 2));
或也使用
navigator.mediaDevices.getDisplayMedia()