js 如何监视页面缩放，而不是窗口缩放

在JavaScript中，如果你想监控页面的实际缩放，而不仅仅是浏览器窗口的缩放，你可以使用`resize`事件结合`getBoundingClientRect()`方法来检查元素尺寸的变化。以下是一个简单的示例：

function observePageZoom() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const targetElement = mutation.target;
        const isZoomed = targetElement.style.transform.includes('scale(');
        
        if (isZoomed) {
          // 页面已缩放，这里可以处理缩放后的逻辑
          console.log('Page is zoomed!');
          // 可能需要更新视口大小、计算布局等操作
        } else {
          // 页面恢复原状，进行相应的处理
          console.log('Page is not zoomed anymore.');
        }
      }
    });
  });

  // 观察整个文档，如果你只想观察特定元素，可以传递一个节点列表作为第一个参数
  observer.observe(document.body, { attributes: true });
}

// 初始化监听
observePageZoom();

这个例子会监听文档的`style`属性变化，并检查是否包含`transform: scale(...)`这样的缩放样式。当发现页面缩放时，它将执行相应回调。