监听窗口宽度变化（忽略高度变化）的完整教程-js教程-PHP中文网

监听窗口宽度变化（忽略高度变化）的完整教程

本文介绍如何精准监听浏览器窗口宽度变化事件，避免因高度调整或 iOS Safari 滚动触发误响应，通过缓存并比对 window.innerWidth 实现宽度专属响应逻辑。

本文介绍如何精准监听浏览器窗口宽度变化事件，避免因高度调整或 ios safari 滚动触发误响应，通过缓存并比对 `window.innerwidth` 实现宽度专属响应逻辑。

在 Web 开发中，resize 事件常用于响应视口尺寸变化，但其默认行为是只要窗口宽或高任一维度改变即触发——这在实际场景中可能带来冗余执行：例如 iOS Safari 中用户滚动页面时，地址栏隐藏/显示会动态改变视口高度，从而意外触发 resize 回调；又如响应式布局中，仅需在断点宽度切换时重排组件，而无需处理纯高度变化。

最简洁可靠的解决方案是：手动追踪上一次宽度值，并在每次 resize 触发时进行比对。只有当 window.innerWidth 确实发生变化时，才执行业务逻辑，并立即更新缓存值。该方法轻量、无依赖、兼容所有现代浏览器（包括 iOS Safari），且完全规避了高度干扰。

以下为推荐实现代码：

let lastWidth = window.innerWidth;

window.addEventListener('resize', function () {
  const currentWidth = window.innerWidth;
  if (currentWidth !== lastWidth) {
    // ✅ 此处仅在宽度真正变化时执行
    console.log('窗口宽度已变更：', currentWidth);
    // 例如：重新计算栅格列数、触发布局重绘、更新 Canvas 尺寸等

    lastWidth = currentWidth; // 更新缓存，为下次比对做准备
  }
});

⚠️ 注意事项：

不要使用 window.onresize = ... 赋值方式：它会覆盖其他已绑定的 resize 监听器，推荐统一使用 addEventListener 以支持多监听器共存；

避免在回调中频繁读取 innerWidth 多次：应先缓存为局部变量（如示例中的 currentWidth），提升性能并确保比对一致性；

移动端适配补充：iOS Safari 的“视觉视口”（visual viewport）滚动虽不影响 innerWidth，但若涉及 visualViewport API（如缩放感知），需额外监听 visualviewport.resize 并单独处理，本方案不与此冲突；

首次加载时机：如需在页面初始化时也执行一次宽度相关逻辑（例如首屏渲染适配），可在监听器注册后立即调用一次处理函数。