监听浏览器缩放需结合 resize 事件与 visualviewport api：resize 可捕获多数浏览器缩放触发，但无法区分缩放与窗口调整；visualviewport.scale 提供精准缩放比例，配合节流可避免卡顿，使用后须及时清理监听器。
监听浏览器缩放并节流执行逻辑，核心是监听 resize 事件（因为主流浏览器缩放会触发该事件），再用节流函数限制回调调用频率。
为什么 resize 能捕获缩放？
Chrome、Firefox、Edge 等现代浏览器在用户使用 Ctrl + 鼠标滚轮 或快捷键（Ctrl + +/-）缩放页面时，会触发 window.resize 事件。虽然缩放不改变视口尺寸（如 window.innerWidth 可能不变），但多数情况下仍会触发 —— 尤其当缩放导致布局重排或字体渲染变化时。注意：Safari 对缩放的 resize 触发较保守，有时需配合 visualViewport 监听。
用节流函数封装 resize 回调
直接在 resize 中执行密集操作（如重算布局、更新 Canvas、调整字体）易造成卡顿。节流确保回调最多每隔固定时间执行一次（例如 100ms），避免高频触发。
一个轻量节流实现：
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
<p>const handleResize = throttle(() => {
console.log('缩放或窗口大小变化，执行一次');
// 在这里放你的缩放响应逻辑，比如：
// updateChartSize(), adjustFontSize(), repositionTooltips()
}, 100); // 100ms 内最多执行一次</p><p>window.addEventListener('resize', handleResize);
</p>更健壮的方案：结合 visualViewport（推荐用于精准缩放检测）
仅靠 resize 无法区分「纯缩放」和「窗口拉伸」。若需精确响应缩放（如适配高 DPI 或动态字体），可监听 visualViewport.scale 变化：
-
visualViewport是标准 API，支持 Chrome 61+、Edge 79+、Safari 13.1+（Firefox 暂不支持） - 它提供
scale属性，值为缩放比例（1.0 表示 100%，1.25 表示 125%） - 监听
visualviewport事件，并对scale做节流判断
示例：
if ('visualViewport' in window) {
const throttledOnScale = throttle(() => {
const scale = window.visualViewport.scale;
console.log('当前缩放比例：', scale.toFixed(2));
// 根据 scale 调整 UI，例如：
// document.body.style.fontSize = `${16 * scale}px`;
}, 80);
<p>window.visualViewport.addEventListener('scroll', throttledOnScale);
window.visualViewport.addEventListener('resize', throttledOnScale);
}
</p>清理监听器，避免内存泄漏
组件卸载或页面切换时，记得移除事件监听：
- 保存节流后的回调引用（不能直接传匿名函数）
- 在适当时机调用
removeEventListener
例如：
const throttledHandler = throttle(handleLogic, 100);
window.addEventListener('resize', throttledHandler);
<p>// 清理时
window.removeEventListener('resize', throttledHandler);
</p>不复杂但容易忽略。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
