js如何监听页面缩放？

在 JavaScript 中，你可以使用 window.onresize 事件来监听浏览器窗口大小的变化，这包括页面缩放。然而，resize 事件本身并不能区分是窗口大小改变还是缩放比例改变。

为了区分这两种情况，你需要结合 visualViewport API。 visualViewport 提供了关于视口大小和缩放比例的信息。

以下是一个结合 resize 和 visualViewport 的例子，可以监听页面缩放：

let lastVisualViewportWidth = window.visualViewport.width;

window.visualViewport.addEventListener('resize', () => {
  const newVisualViewportWidth = window.visualViewport.width;

  if (newVisualViewportWidth !== lastVisualViewportWidth) {
    console.log('页面缩放已更改');
    // 在这里执行你想要的操作，例如重新计算布局
    lastVisualViewportWidth = newVisualViewportWidth;
  } else {
    console.log('窗口大小已更改，但缩放比例未变');
    // 处理窗口大小调整，但缩放比例不变的情况
  }
});


// 或者使用更旧的 window.onresize (兼容性更好)
// 但需要注意，这种方式不能区分缩放和窗口大小调整
window.onresize = function() {
  console.log('窗口大小或缩放比例已更改 (旧方法)');
  // 需要额外的逻辑来判断是缩放还是窗口大小调整
};


//  更精确的缩放检测 (需要 polyfill 兼容旧浏览器)
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', () => {
    console.log('缩放比例:', window.visualViewport.scale);
    console.log('宽度:', window.visualViewport.width);
    console.log('高度:', window.visualViewport.height);
  });
} else {
  console.warn("visualViewport API 不受支持");
  // 使用替代方案或 polyfill
}

解释：

1. visualViewport.width: 获取当前视口的宽度 (受缩放影响)。
2. addEventListener('resize', ...): 监听 visualViewport 的 resize 事件。 当视口大小或缩放比例发生变化时，会触发此事件。
3. 比较宽度: 通过比较前后两次 visualViewport.width 的值，可以判断是否发生了缩放。如果宽度改变了，则说明发生了缩放。
4. lastVisualViewportWidth: 存储上一次的视口宽度，用于比较。

关键点:

• 使用 visualViewport API 是检测缩放的最可靠方法。
• window.onresize 事件可以监听窗口大小和缩放的变化，但需要额外的逻辑来区分它们。
• 考虑使用 polyfill 来兼容不支持 visualViewport API 的旧版浏览器。

使用 polyfill 兼容旧浏览器:

你可以使用 polyfill 来为不支持 visualViewport API 的浏览器提供类似的功能。一个常用的 polyfill 是 viewport-units-buggyfill。 你可以通过 npm 或 yarn 安装它：

npm install viewport-units-buggyfill

然后在你的 JavaScript 代码中引入并初始化它：

import viewportUnitsBuggyfill from 'viewport-units-buggyfill';
viewportUnitsBuggyfill.init();

这个 polyfill 会尽可能地模拟 visualViewport 的行为，让你在旧版浏览器中也能检测页面缩放。

希望这个更详细的解释对您有所帮助！