如何获取媒体查询中使用的值，例如device-width

Question

我了解在CSS中使用@media查询，例如当浏览器的窗口大于一定数量时应用规则。

我知道我还可以在Javascript中使用window.matchMedia()来确定特定的查询是否匹配。

但是，我如何才能实际获得正在使用的媒体的当前值？

例如，如果我想访问media (如screen，tv...)、orientation、monochrome、device-width或width或其他Media Features的值，这些值是否可以通过DOM访问？

Answer 1

正如@abhitalks在评论中所说，从DOM获取这些值是不可能的。

这是我的变通方法。

对于只有一小部分已知值的简单事情，您可以使用window.matchMedia()一次测试一个。

对于查询中支持min-前缀的数字内容，例如device-width，您可以这样做：

var ls, l=0, h=8192, c=parseInt((l+h)/2), i=20;
while (i > 0 && (c - l >1) && (h - c>1)) {
  i--; // Shouldn't take more than 13 guesses, but in case of bugs!
  if (window.matchMedia('(min-device-width: ' + c + 'px)').matches) {
    l=c; ls=0;
  } else {
    h=c; ls=1;
  }
  c = parseInt((h+l)/2);
}
c -= ls;
alert("Device width is: ", c);

codepen demo