Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

测试媒体查询

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);

浏览器兼容性

特性 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,