在 Window 接口中提供了 matchMedia() 方法，它需要提供一个媒体查询字符串，并返回一个 MediaQueryList 对象。MediaQueryList 对象判断当前显示设备是否匹配特定的媒体查询字符串。

在本文中我们将介绍如何使用 JS 获取媒体设备，并针对不同的媒体设备执行不同的操作。

JS获取媒体设备接口的语法形式

mediaQueryList = window.matchMedia(mediaQueryString)

参数

mediaQueryString：媒体查询字符串

返回值

mediaQueryList：是一个 MediaQueryList 对象，它有 matches 属性用于判断当前设备是否匹配媒体查询字符串。

JS获取媒体设备执行不同操作

查询是否配置特定的媒体设备需要使用 MediaQueryList 对象的 matches 属性。

1、当屏幕电脑时执行特定操作

电脑所对应的媒体设备的宽度小于 992px，因此当可以给定最小宽度媒体查询字符串，当设备的宽度大于该最小值，则匹配成功，执行特定语句。

具体示例：

let mql = window.matchMedia("(min-width: 992px)");

if (mql.matches) {
  // 执行特定操作
}

2、当屏幕手机时执行特定操作

手机所对应的媒体设备的宽度小于 768px，因此当可以给定最大宽度媒体查询字符串，当设备的宽度小于该最大值，则匹配成功，执行特定语句。

具体示例：

let mql = window.matchMedia("(max-width: 767px)");

if (mql.matches) {
  // 执行特定操作
}

可以给定最小宽度媒体查询字符串，当设备的宽度小于该最小值，则匹配失败，然后对结果取反：

let mql = window.matchMedia("(min-width: 768px)");

if (!mql.matches) {
  // 执行特定操作
}

注：mql.matches 前用 ! 取反

结语

在本文中我们介绍了如何使用 JS 获取媒体设备，并针对手机、Pad、电脑等不同的媒体设备执行不同的操作。