本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化（如 iOS Safari 滚动时触发的伪 resize）导致误执行，核心是通过缓存并比对 window.innerWidth 实现精准检测。
本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化（如 ios safari 滚动时触发的伪 resize）导致误执行，核心是通过缓存并比对 `window.innerwidth` 实现精准检测。
在前端开发中，resize 事件常被用于响应式布局调整，但其触发条件过于宽泛：只要窗口尺寸任一维度（宽或高）变化即触发。这在 iOS Safari 中尤为棘手——用户垂直滚动页面时，地址栏/工具栏的显隐会导致视口高度动态变化，从而意外触发 resize，干扰业务逻辑（例如错误重绘布局、重复请求等）。
要实现「仅当宽度变化时执行」，最简洁可靠的方式是记录上一次宽度值，并在每次 resize 触发时进行比对。无需依赖第三方库或复杂节流，原生 JavaScript 即可高效完成：
let lastWidth = window.innerWidth;
window.addEventListener('resize', function () {
const currentWidth = window.innerWidth;
if (currentWidth !== lastWidth) {
// ✅ 此处仅在宽度真正变化时执行
console.log('Window width changed:', lastWidth, '→', currentWidth);
// 例如：重新计算栅格列数、更新 Canvas 尺寸、触发布局重排等
lastWidth = currentWidth; // 更新缓存值
}
});
✅ 推荐使用
addEventListener而非onresize：前者支持多监听器、更符合现代规范，且便于后续移除（如removeEventListener），避免内存泄漏。
注意事项：
- 不要使用
window.outerWidth或document.documentElement.clientWidth—— 前者包含浏览器 UI 边框，后者受滚动条影响，均无法准确反映 CSS 视口宽度；window.innerWidth是标准且稳定的宽度参考。 - 该方案天然兼容所有现代浏览器（包括 iOS Safari 10+），无需额外 polyfill。
- 若需进一步优化性能（如防抖高频触发），可在
if判断后包裹requestAnimationFrame或轻量节流，但多数场景下直接比对已足够高效。
总结：宽度专属监听的本质是「状态感知」而非事件过滤。通过维护一个轻量的宽度快照，即可将模糊的 resize 事件转化为精确的宽度变更信号，既简洁又健壮。
