通过程序测试媒体查询

该 DOM 提供了可以通过 媒体查询 以编程方式测试结果的功能，方法是使用 MediaQueryList 接口及其方法和属性。创建 MediaQueryList 对象后，您可以检查 查询 的结果或在结果更改时接收通知。

创建媒体查询列表

在评估媒体查询的结果之前，您需要创建表示该查询的 MediaQueryList 对象。为此，请使用 window.matchMedia 方法。

例如，要设置一个查询列表以确定设备是处于横向还是纵向 方向

js
const mediaQueryList = window.matchMedia("(orientation: portrait)");

检查查询结果

创建媒体查询列表后，您可以通过查看其 matches 属性的值来检查查询的结果

js
if (mediaQueryList.matches) {
  /* The viewport is currently in portrait orientation */
} else {
  /* The viewport is not currently in portrait orientation, therefore landscape */
}

接收查询通知

如果您需要持续了解查询评估结果的更改，则注册 监听器 比轮询查询结果更有效。为此，请在 MediaQueryList 对象上调用 addEventListener() 方法，并提供一个回调函数，在媒体查询状态更改时（例如，媒体查询测试从 true 变为 false）调用该函数

js
// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// Define a callback function for the event listener.
function handleOrientationChange(mql) {
  // …
}

// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);

此代码创建方向测试媒体查询列表并向其添加事件监听器。定义监听器后，我们还直接调用该监听器。这使得我们的监听器可以根据当前设备方向执行调整；否则，我们的代码可能会假设设备在启动时处于纵向模式，即使它实际上处于横向模式。

handleOrientationChange() 函数将查看查询的结果，并处理我们在方向更改时需要执行的操作

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

在上面，我们将参数定义为 evt - 一个类型为 MediaQueryListEvent 的事件对象，该对象还包括 media 和 matches 属性，因此您可以通过直接访问它或访问事件对象来查询 MediaQueryList 的这些特性。

结束查询通知

要停止接收有关媒体查询值更改的通知，请在 MediaQueryList 上调用 removeEventListener()，并向其传递之前定义的回调函数的名称

js
mediaQueryList.removeEventListener("change", handleOrientationChange);

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅