Question

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

我想阅读浏览器的实际媒体功能＆＃39; JavaScript中的值。我怎么能这样做？

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

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

Answer 1

每个设备都有自己的dpi，并且JavaScript API所提供的信息不比devicePixelRatio更精确。

Window界面中的devicePixelRatio给您一个比率指示是否应缩放呈现的页面。

浏览器假定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

Answer 2

媒体查询是CSS3中引入的，它是响应式Web设计的关键要素之一。媒体查询用于确定视口的宽度和高度，以使网页在所有类型的设备上看起来都很好

window.matchMedia（）方法返回一个MediaQueryList对象，该对象表示指定CSS媒体查询字符串的结果。 matchMedia（）方法的值可以是CSS @media规则的任何媒体功能，例如min-height，min-width，orientation等。

Answer 3

您可以使用本机导航器对象获取媒体属性，例如访问网络摄像头，麦克风。例如：-

navigator.mediaDevices.getDisplayMedia()

或也使用

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

也有屏幕对象：-

screen.availHeight

如何阅读浏览器的媒体功能？

3 个答案: