本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化或iOS Safari滚动导致的误触发，通过缓存并比对window.innerWidth实现轻量、可靠的宽度监听。

本文介绍如何仅在浏览器窗口宽度发生变化时触发事件，避免因高度变化或ios safari滚动导致的误触发，通过缓存并比对`window.innerwidth`实现轻量、可靠的宽度监听。

在响应式开发中，我们常需根据视口宽度调整布局或重新初始化组件。但原生 resize 事件会在宽度和高度任意一个变化时均被触发——这不仅带来冗余计算，更在 iOS Safari 中引发严重干扰：用户垂直滚动页面时，地址栏/工具栏的显隐会动态改变视口高度，从而意外触发 resize 回调，导致布局抖动或逻辑错误。

最简洁可靠的解决方案是主动过滤：仅当 window.innerWidth 发生变化时执行业务逻辑，忽略高度变化及滚动引发的假 resize。

✅ 实现方式（推荐使用 addEventListener + 闭包封装）

let lastWidth = window.innerWidth;

window.addEventListener('resize', () => {
  const currentWidth = window.innerWidth;
  if (currentWidth !== lastWidth) {
    // ✅ 此处仅在宽度真正变化时执行
    console.log('Width changed:', lastWidth, '→', currentWidth);
    // 例如：重置网格列数、更新媒体查询状态、刷新图表尺寸等

    lastWidth = currentWidth; // 更新缓存
  }
});

? 为什么不用 window.onresize？
虽然 onresize = function(){} 写法可行，但它会覆盖其他已绑定的 resize 处理器，不利于模块化与协作开发。addEventListener 支持多监听器共存，更符合现代前端实践。

⚠️ 注意事项与优化建议

• 防抖非必需，但可选增强：上述方案已消除高度干扰，若还需应对高频 resize（如拖拽窗口），可叠加 requestAnimationFrame 或轻量防抖：

  let resizeTimer;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      if (window.innerWidth !== lastWidth) {
        // 执行宽度变更逻辑
        lastWidth = window.innerWidth;
      }
    }, 50);
  });

• 首次加载需手动触发：若逻辑依赖初始宽度（如 SSR 后 hydrate），应在 DOMContentLoaded 或 load 事件中主动检查一次宽度是否匹配预期。

  

  Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

  规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

  下载

• 移动端兼容性无忧：该方案完全基于标准 window.innerWidth，兼容所有现代浏览器（包括 iOS Safari、Chrome for Android），不依赖 matchMedia 或 CSS 媒体查询 API，轻量且稳定。

通过这一简单而精准的宽度监听模式，你既能规避 iOS 滚动陷阱，又能保持代码简洁可控，是响应式交互中的实用基石技巧。