如何监听浏览器停靠/取消停靠屏幕边缘事件？解决resize事件失效问题

我使用resize事件监听器来调整div尺寸，代码如下：

window.addEventListener('resize', (event) => {
                            
  var responsiveWidth = document.querySelector(".responsive").offsetWidth;
  var resumeWidth = node.offsetWidth;
                            
  if(responsiveWidth < resumeWidth){                              
    node.style.scale = responsiveWidth/resumeWidth;
    targetNode.style.height = `${node.offsetHeight*responsiveWidth/resumeWidth}px`;                             
   }
});

但存在问题：当拖动浏览器顶部手柄取消停靠后再重新停靠时，resize事件不触发，导致被调整的div尺寸不符合预期。我曾尝试使用fullscreenchange监听器，但无效果。请问是否有监听浏览器停靠/取消停靠屏幕边缘的事件？

目前浏览器没有专门监听窗口停靠/取消停靠的原生事件，但可以通过以下几种方案解决：

• 组合resize与visibilitychange事件：窗口停靠/取消停靠操作可能会触发页面可见性变化，通过visibilitychange事件捕捉页面重新可见的时机，强制执行尺寸调整逻辑：

// 提取尺寸调整逻辑为独立函数
function adjustDivSize() {
  const responsiveWidth = document.querySelector(".responsive").offsetWidth;
  const resumeWidth = node.offsetWidth;
                            
  if (responsiveWidth < resumeWidth) {                              
    node.style.scale = responsiveWidth / resumeWidth;
    targetNode.style.height = `${node.offsetHeight * responsiveWidth / resumeWidth}px`;                             
   }
}

// 绑定resize事件
window.addEventListener('resize', adjustDivSize);
// 绑定visibilitychange事件，页面重新可见时执行调整
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    adjustDivSize();
  }
});

• 低频率定时检查：如果上述事件仍有遗漏，可以设置一个低间隔的定时器，定期检查并调整尺寸，平衡性能与准确性：

// 每500ms检查一次，可根据需求调整间隔
setInterval(adjustDivSize, 500);

• 通过窗口与屏幕尺寸对比判断状态：窗口停靠时（比如全屏停靠），window.outerWidth通常会等于screen.width，可以在定时器或可见性变化事件中对比这些值，触发调整：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    // 检查是否处于停靠状态（示例逻辑，可根据实际场景调整）
    const isDocked = window.outerWidth === screen.width;
    if (isDocked) {
      adjustDivSize();
    }
  }
});

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