DOM有这样一种特性,可以通过程序来获得媒体查询的结果。这是通过 MediaQueryList 接口和它的方法来实现的。一旦你创建了MediaQueryList 对象, 你就可以通过它来检查查询结果,或者,你也可以一些设置,来实现当查询结果变化时,自动接收到通知。

注意: 本文讨论的这种特性目前还处于草案状态,最终的实现可能跟这里的讨论有区别。

创建媒体查询列表

在获取查询结果前,你先要创建 MediaQueryList 对象来存放媒体查询。为了实现这个目的,需要使用window.matchMedia 方法。

举个例子,比如你想设置一个查询列表用来判定设备屏幕处于横屏还是竖屏,那你可以像下面这样编码:

var mql = window.matchMedia("(orientation: portrait)");

检查查询结果

一旦你创建了一个媒体查询列表,你就可以通过检查相应查询的 matches 属性来获取查询结果,上述属性会直接返回查询结果:

if (mql.matches) {
  /* The device is currently in portrait orientation */
} else {
  /* The device is currently in landscape orientation */
}

接收查询提醒

如果你需要持续观察查询结果值的变化情况,那么就很有必要来注册一个监听器,这比手动检查查询结果要有效很多。 如何实现呢?你需要在MediaQueryList对象上使用 addListener() 方法 ,这样就通过实现MediaQueryListListener 接口来指定了一个监听器。

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 

上述代码创建了一个屏幕方向的测试查询列表mql,并且添加了事件监听。需要注意的是,当我们添加监听后,我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说,如果我们代码中设定设备处于竖屏模式,而实际上它在启动时处于横屏模式,那么我们在后面的判定就会出现矛盾。

然后,我们可以在handleOrientationChange() 方法中来查看查询结果,并且可以设置屏幕方向变化后的逻辑处理代码:

function handleOrientationChange(mql) {
  if (mql.matches) {
    /* The device is currently in portrait orientation */
  } else {
    /* The device is currently in landscape orientation */
  }
}

终止查询通知

如果你不需要再接收媒体查询值变化的相关通知,那你可以方便的通过在MediaQueryList上调用removeListener() 方法来移除监听:

mql.removeListener(handleOrientationChange);

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
最低支持版本 9 6.0 (6.0) 10 ? 5.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
最低支持版本 ? ? ? ? 5

另见

文档标签和贡献者

此页面的贡献者: Chajn, reygreen1, Wenbin
最后编辑者: Chajn,