如何仅监听窗口宽度变化？避免iOS Safari滚动触发resize事件

要实现仅在窗口宽度改变时触发事件，同时避免iOS Safari滚动时的误触发，核心思路是记录并对比前后的窗口宽度，只有宽度发生变化时才执行目标逻辑。以下是适配你当前使用window.onresize的最简实现：

代码实现 #

// 保存初始窗口宽度
let lastWindowWidth = window.innerWidth;

window.onresize = function(event) {
  const currentWidth = window.innerWidth;
  // 仅当宽度确实变化时执行逻辑
  if (currentWidth !== lastWindowWidth) {
    // 这里替换成你需要执行的代码
    console.log('窗口宽度已改变');
    // 更新记录的宽度，用于下次对比
    lastWindowWidth = currentWidth;
  }
};

原理说明 #

iOS Safari在向下滚动时，地址栏或状态栏的隐藏/显示会导致窗口高度变化，进而触发resize事件，但此时窗口宽度并未改变。通过对比lastWindowWidth和当前的window.innerWidth，就能过滤掉这种仅高度变化的误触发场景，只在宽度真正改变时执行你的业务逻辑。

扩展：使用addEventListener的版本 #

如果你后续切换到addEventListener方式，逻辑完全一致：

let lastWindowWidth = window.innerWidth;

window.addEventListener('resize', function(event) {
  const currentWidth = window.innerWidth;
  if (currentWidth !== lastWindowWidth) {
    // 执行你的业务逻辑
    lastWindowWidth = currentWidth;
  }
});

内容的提问来源于stack exchange，提问作者Nico44044