调整窗口至最小高度时JavaScript Resize事件未触发

我之前也碰到过一模一样的情况，这其实是Chrome v66（以及后续部分版本）在Windows 10下的一个特定行为——当窗口被拖到只剩标题栏的极限高度时，浏览器内部的窗口尺寸计算逻辑会跳过派发window.resize事件，哪怕页面的body元素依然存在且尺寸确实发生了变化。

为什么会出现这个问题？ #

Chrome在处理这种极端窗口尺寸时，可能认为可视区域已经没有实际内容需要重排，因此省略了resize事件的触发，但实际上body元素的尺寸还是发生了改变，只是浏览器没有将这个变化映射到window的resize事件上。

解决方案：用ResizeObserver监听元素尺寸变化 #

既然window.resize靠不住，我们可以直接监听document.body（或者页面的根容器元素）的尺寸变化，这样就能捕获到这种极端情况下的尺寸变更了。ResizeObserver是现代浏览器支持的API，专门用来监听元素的尺寸变化，比window.resize更精准。

示例代码：

// 初始化ResizeObserver，监听目标元素的尺寸变化
const bodyResizeObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    // 获取body的最新尺寸
    const { width, height } = entry.contentRect;
    console.log(`Body尺寸更新：宽${width}px，高${height}px`);
    // 执行你原本在resize事件里的逻辑
    handleResize();
  });
});

// 开始监听document.body
bodyResizeObserver.observe(document.body);

// 注意：在页面卸载或者不需要监听时，记得断开观察避免内存泄漏
// window.addEventListener('beforeunload', () => {
//   bodyResizeObserver.disconnect();
// });

兼容旧环境的备选方案 #

如果需要兼容不支持ResizeObserver的旧浏览器（不过Chrome v66已经支持这个API了，这个方案对你可能不是必须的），可以用定时轮询的方式检查body的尺寸：

let lastBodyHeight = document.body.offsetHeight;
let lastBodyWidth = document.body.offsetWidth;

setInterval(() => {
  const currentHeight = document.body.offsetHeight;
  const currentWidth = document.body.offsetWidth;
  
  if (currentHeight !== lastBodyHeight || currentWidth !== lastBodyWidth) {
    console.log('Body尺寸发生变化');
    handleResize();
    lastBodyHeight = currentHeight;
    lastBodyWidth = currentWidth;
  }
}, 100); // 每隔100ms检查一次，可根据需求调整间隔

你可以试试第一种方案，应该能完美捕获到窗口缩至标题栏时的尺寸变化，因为它直接监听的是body元素的尺寸，而不是依赖window的resize事件。

内容的提问来源于stack exchange，提问作者Im-Harrison