本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化（如 iOS Safari 滚动时触发的 resize）导致误执行，核心是通过缓存并比对 window.innerWidth 实现精准检测。
本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化（如 ios safari 滚动时触发的 resize）导致误执行，核心是通过缓存并比对 `window.innerwidth` 实现精准检测。
在 Web 开发中，resize 事件常用于响应式布局调整，但其触发频率高且不区分宽/高变化——尤其在 iOS Safari 中，页面滚动可能意外触发 resize（因地址栏显示/隐藏导致视口高度变化），从而干扰依赖宽度逻辑的代码（如栅格重排、媒体查询模拟等）。
要仅响应宽度变化，最轻量、兼容性最佳的方案是：记录上一次宽度值，并在每次 resize 触发时对比当前 window.innerWidth。若值不同，则视为有效宽度变更，执行业务逻辑，并立即更新缓存值。
以下为推荐实现（ES6+，支持所有现代浏览器及 iOS Safari）：
let lastWidth = window.innerWidth;
window.addEventListener('resize', function () {
const currentWidth = window.innerWidth;
if (currentWidth !== lastWidth) {
// ✅ 此处仅在宽度实际变化时执行
console.log('Width changed:', lastWidth, '→', currentWidth);
// 例如：重新计算列数、更新 CSS 变量、触发布局重绘等
handleWidthChange(currentWidth);
lastWidth = currentWidth; // 更新缓存，避免重复触发
}
});
// 示例处理函数（可根据需要替换）
function handleWidthChange(width) {
if (width < 768) {
document.body.classList.add('mobile');
document.body.classList.remove('desktop');
} else {
document.body.classList.add('desktop');
document.body.classList.remove('mobile');
}
}✅ 优势说明：
- 无需依赖
matchMedia或定时器，零额外开销； - 兼容
addEventListener（推荐）与onresize赋值方式； - 自动过滤 iOS Safari 滚动引发的高度抖动（因
innerWidth不受影响）； - 支持防抖增强（如需进一步降低高频触发频率，可在内部包裹
requestAnimationFrame或节流函数）。
⚠️ 注意事项：
- 切勿在
resize回调中频繁读取offsetWidth或触发强制重排（reflow），否则显著影响性能； - 若页面存在 iframe 或动态插入内容导致布局变化，应结合
ResizeObserver监听具体元素，而非全局window； - 初始化时
lastWidth使用window.innerWidth（非document.documentElement.clientWidth），因其包含滚动条宽度，与 CSS 媒体查询行为一致，语义更准确。
通过该模式，你可精准控制响应式逻辑的触发时机，让宽度适配真正“按需而动”。
