你说得没错，原生的resize事件确实会漏掉那些没有拖拽过渡的尺寸变更场景，比如全屏切换、Windows分屏快捷键这类操作。下面给你几个实用的解决方案：

1. 使用ResizeObserver API（推荐） #

这是目前最可靠的方案，专门用于监听元素（包括窗口根元素）的尺寸变化，能覆盖所有你提到的场景，而且性能比定时轮询好很多。

示例代码：

// 监听整个窗口的尺寸变化，监听document.documentElement或者body都可以
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 获取当前窗口的宽高
    const { width, height } = entry.contentRect;
    console.log('窗口尺寸变化：', width, height);
    // 这里写你的业务逻辑
  }
});

// 开始监听根元素
resizeObserver.observe(document.documentElement);

// 记得在不需要的时候停止监听，避免内存泄漏
// resizeObserver.unobserve(document.documentElement);

2. 结合特定场景事件补充 #

如果需要兼容一些不支持ResizeObserver的旧浏览器（比如IE），可以结合以下事件来补全：

• fullscreenchange：监听全屏状态切换，切换时主动检查窗口尺寸
• 定时轮询（兜底方案）：用setInterval定期检查窗口的innerWidth和innerHeight，和上一次的值对比，有变化就触发回调

示例代码（结合全屏事件+定时轮询兜底）：

let lastWidth = window.innerWidth;
let lastHeight = window.innerHeight;

// 检查尺寸变化的函数
function checkSizeChange() {
  const currentWidth = window.innerWidth;
  const currentHeight = window.innerHeight;
  if (currentWidth !== lastWidth || currentHeight !== lastHeight) {
    console.log('窗口尺寸变化：', currentWidth, currentHeight);
    // 更新记录的尺寸
    lastWidth = currentWidth;
    lastHeight = currentHeight;
    // 执行你的业务逻辑
  }
}

// 绑定原生resize事件
window.addEventListener('resize', checkSizeChange);

// 绑定全屏切换事件
document.addEventListener('fullscreenchange', checkSizeChange);

// 定时轮询兜底（比如每100ms检查一次）
const intervalId = setInterval(checkSizeChange, 100);

// 记得在页面卸载时清理定时器和事件监听
window.addEventListener('beforeunload', () => {
  clearInterval(intervalId);
  window.removeEventListener('resize', checkSizeChange);
  document.removeEventListener('fullscreenchange', checkSizeChange);
});

3. 注意事项 #

• ResizeObserver的兼容性：现代浏览器（Chrome 64+、Firefox 69+、Edge 79+）都支持，如果你需要兼容旧环境，再考虑第二种方案
• 内存泄漏：不管用哪种方法，都要记得在组件销毁或者页面卸载时移除监听/清理定时器

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