测试媒体查询

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

浏览器兼容性

另见

• Media queries
• window.matchMedia()
• MediaQueryList
• MediaQueryListListener