如何使用 JavaScript 在所有现代浏览器中检测页面缩放级别？

在现代浏览器中，我们经常会遇到需要检测页面缩放级别的需求。例如，当用户缩放页面时，我们需要根据缩放级别来调整页面布局，以保证页面正常显示。本文将介绍如何使用 JavaScript 在所有现代浏览器中检测页面缩放级别。

使用 window.devicePixelRatio 属性

window.devicePixelRatio 属性表示设备上物理像素和逻辑像素的比例。因此，它可以用于检测页面缩放级别。具体来说，我们可以通过以下公式来计算页面缩放级别：

缩放级别 = 1 / window.devicePixelRatio

例如，如果设备的 devicePixelRatio 为 2，表示一个逻辑像素由四个物理像素组成，那么页面的缩放级别就是 0.5。

下面是一个示例代码，演示如何使用 window.devicePixelRatio 属性检测页面缩放级别：

const zoomLevel = 1 / window.devicePixelRatio;
console.log(`当前页面缩放级别为 ${zoomLevel}`);

使用 window.matchMedia() 方法

另一种检测页面缩放级别的方式是使用 window.matchMedia() 方法。该方法可以创建一个媒体查询对象，用于检测指定的样式表是否匹配当前文档。

我们可以使用以下代码来创建一个媒体查询对象，用于检测是否处于 100% 缩放级别：

const mediaQueryList = window.matchMedia(
  '(resolution: 96dpi) and (min-width: 1280px) and (max-width: 1280px) and (min-height: 800px) and (max-height: 800px)'
);

在上面的代码中，我们创建了一个媒体查询对象，要求分辨率为 96dpi，宽度和高度均为 1280px 或 800px。如果页面处于 100% 缩放级别，那么该媒体查询对象将匹配当前文档。

我们可以使用以下代码来检测该媒体查询对象是否匹配文档：

if (mediaQueryList.matches) {
  console.log('当前页面处于 100% 缩放级别');
} else {
  console.log('当前页面未处于 100% 缩放级别');
}

需要注意的是，上述代码仅适用于 100% 缩放级别。如果需要检测其他缩放级别，我们需要创建相应的媒体查询对象，并在其中设置对应的缩放级别参数。

总结

本文介绍了两种在所有现代浏览器中检测页面缩放级别的方法：使用 window.devicePixelRatio 属性和使用 window.matchMedia() 方法。通过这两种方法，我们可以轻松地获取当前页面的缩放级别，并且根据缩放级别来调整页面布局，以保证页面正常显示。

参考文献

• MDN Web Docs - Window.devicePixelRatio
• MDN Web Docs - Window.matchMedia()