Using media queries from code
DOM提供了可以测试一个媒体查询编程的结果的功能，通过MediaQueryList接口和它的方法和属性。创建MediaQueryList对象后，可以检查查询的结果，或者在结果更改时收到通知。
创建媒体查询列表
在评估媒体查询的结果之前，您需要创建MediaQueryList表示查询的对象。为此，请使用该window.matchMedia方法。
例如，要设置一个查询列表来确定设备是横向还是纵向的：
var mediaQueryList = window.matchMedia("(orientation: portrait)");检查查询结果
创建媒体查询列表后，可以通过查看其matches属性的值来检查查询的结果：
if (mediaQueryList.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is not currently in portrait orientation, therefore landscape */
}接收查询通知
如果您需要持续了解对查询的评估结果所做的更改，则注册侦听器比查询查询的结果更有效。为此，请在对象addListener()上调用方法MediaQueryList，使用回调函数在媒体查询状态更改（例如，媒体查询测试进行true到false）时调用：
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
function handleOrientationChange(mql) { ... } // Define a callback function for the event listener.
mediaQueryList.addListener(handleOrientationChange); // Add the callback function as a listener to the query list.
handleOrientationChange(); // Run the orientation change handler once.此代码创建方向测试媒体查询列表，然后向其添加事件侦听器。在添加侦听器之后，我们也直接调用侦听器。这使得我们的听众根据当前设备的方向进行调整; 否则，我们的代码可能会认为设备在启动时处于纵向模式，即使它实际上处于横向模式。
该handleOrientationChange()函数将查看查询的结果，并处理任何我们需要做的方向更改：
function handleOrientationChange(evt) {
if (evt.matches) {
/* The viewport is currently in portrait orientation */
} else {
/* The viewport is currently in landscape orientation */
}
}上面，我们将参数定义为evt- 一个事件对象。这是有道理的，因为以标准方式更新的MediaQueryList句柄事件监听器的实现。他们不再使用不同寻常的MediaQueryListListener机制，而是使用标准的事件监听器设置，将类型为事件的事件对象MediaQueryListEvent作为参数传递给回调函数。
结束查询通知
要停止接收有关更改您的媒体查询的值通知，呼吁removeListener()对MediaQueryList，它传递先前定义的回调函数的名称：
mediaQueryList.removeListener(handleOrientationChange);浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 9 | (Yes) | 6.0 (6.0) | 10 | 12.1 | 5 |
New version spec update | (Yes) | ? | 55 (55) | No support | (Yes) | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? | ? | ? |
New version spec update | No support | ? | 55.0 (55) | No support | (Yes) | ? | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
