窗口resize时执行函数失效：全屏切换未触发函数

这个问题我之前也碰到过，确实挺头疼的——尤其是依赖窗口尺寸调整来适配元素的时候，系统级的窗口最大化/还原居然没触发resize事件，太坑了！下面给你几个靠谱的替代方案，亲测有效：

1. 改用ResizeObserver API（最推荐） #

相比window的resize事件，ResizeObserver是专门用来监听元素尺寸变化的API，它能更精准地捕获到元素（包括body/html根元素）的尺寸变更，不管是窗口拖拽调整还是最大化/还原操作，只要元素尺寸变了就会触发回调。

示例代码：

// 监听根元素的尺寸变化
const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 这里写你的元素尺寸更新逻辑
    console.log('元素尺寸变化:', entry.contentRect.width, entry.contentRect.height);
    updateElementSizes(); // 你的自定义更新函数
  }
});

// 监听body或者html元素
resizeObserver.observe(document.body);

// 记得在页面卸载时销毁观察者，避免内存泄漏
window.addEventListener('unload', () => {
  resizeObserver.disconnect();
});

2. 优化resize事件的触发逻辑 #

有时候不是resize事件没触发，而是浏览器对resize事件做了节流处理，导致快速切换窗口状态时没捕获到。可以加个防抖函数来确保回调能执行：

示例代码：

let resizeTimeout;

function handleResize() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    updateElementSizes(); // 你的自定义更新函数
  }, 100); // 100ms的防抖延迟，可根据需求调整
}

// 绑定resize事件
window.addEventListener('resize', handleResize);

3. 针对浏览器全屏模式的补充（F11全屏） #

如果你的场景还包含浏览器原生全屏（按F11进入的那种），可以额外监听fullscreenchange事件，配合resize事件一起使用：

示例代码：

function handleFullscreenChange() {
  // 全屏状态变化时强制更新元素尺寸
  updateElementSizes();
}

document.addEventListener('fullscreenchange', handleFullscreenChange);
// 兼容不同浏览器前缀
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

小提示 #

如果以上方案还是不行，可以试试在窗口状态切换后主动检查窗口尺寸——比如监听mouseup事件（用户点击最大化/还原按钮后松开鼠标），然后对比当前窗口尺寸和之前的记录，有变化就执行更新逻辑，不过这个方法比较hack，优先推荐前两种。

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