JavaScript media queries

译自 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

Note: This is an experimental technology

Because this technology’s specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

注意：这事一项实验技术，因为该技术的说明书还未固定，使用在不同的浏览器时，请核对兼容性表。同时还必须注意，实验技术的语法和行为在将来的浏览器版本中，容易遭到改变，这就跟说明书的改变一样。

Create a media query list

Before you can evaluate the results of a query, you need to create the MediaQueryList object representing the media query. To do this, use the window.matchMedia method.

在你得到查询的结果之前，你需要创建一个代表媒介查询的 MediaQueryList 对象。要这样做的话，请使用 window.matchMedia 方法。

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

例如，如果你想要设置一个查询列表来决定该设备是横屏还是竖屏的，你可以这样做：

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

Checking the result of a query

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

一旦你创建了媒介查询列表，你就可以通过查看它的 matches 属性来校验查询结果，matches 属性反应了查询的结果。

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

Receiving query notifications

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it’s more efficient to register a listener than to poll the query’s result. To do this, you can call the addListener() method on the MediaQueryList object, specifying an observer that implements the MediaQueryListListener interface:

如果你想要在持续地知道查询结果的改变，更有效的方式是注册一个监听器，而不是去拉取查询的结果。这样做的话，你需要在 MediaQueryList 对象上调用 addListener() 方法，指定一个实现 MediaQueryListener 的观察者：

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

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it’s actually in landscape mode at startup, we could have inconsistencies).

该代码创建了一个方向测试媒介查询列表，mql，然后为它添加一个监听器。注意添加了监听器之后，我们通常会直接调用监听器一次。这样会让我们的监听器基于当前的设备方向执行初始的调整（否则，如果你的代码假定了设备处于竖屏模式，但是它实际上它在启动时垂于横屏模式，这就将矛盾了）。

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

我们实现的 handleOrientationChange() 方法，之后会监视查询结果，并且在方向改变的时候按我们需要的去做：

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

Ending query notifications

When you no longer need to receive notifications about changes to the value of your media query, you can simply call removeListener() on the MediaQueryList:

当你不再需要接收关于媒介查询的值改变的通知时，你可以简单的在 MediaQueryList 上调用 removeListener()：

mql.removeListener(handleOrientationChange);

See also

Media queries

window.matchMedia()

MediaQueryList

MediaQueryListListener