安卓Chrome更新后进入fullscreen触发二次resize事件问题求助

近期安卓Chrome更新后，不少开发者都碰到了这个糟心的问题：进入全屏（fullscreen）后，第一次交互触发的resize是正常的——地址栏隐藏，高度拉到屏幕最大可用值（比如你提到的854px），但第二次随便点一下页面，又会触发一次resize，高度直接掉到中间值（比如806px），地址栏还明明是隐藏的。

下面是社区里验证过的几个可行修复方案：

• 过滤异常resize事件
  先记录首次全屏后的高度，后续在全屏状态下，只处理高度大于等于这个值的resize事件，直接忽略掉被压缩的异常情况：

  let fullscreenBaseHeight = 0;
  window.addEventListener('resize', () => {
    if (document.fullscreenElement) {
      const currentH = window.innerHeight;
      if (currentH >= fullscreenBaseHeight || fullscreenBaseHeight === 0) {
        fullscreenBaseHeight = currentH;
        // 这里放你的正常resize处理逻辑
        updatePageLayout();
      }
    } else {
      fullscreenBaseHeight = 0;
      updatePageLayout();
    }
  });
  

• 强制锁定全屏视口
  进入全屏后，直接修改meta viewport的配置，把高度锁死在当前全屏高度，不让Chrome乱调整：

  function goFullscreen() {
    const root = document.documentElement;
    if (root.requestFullscreen) {
      root.requestFullscreen().then(() => {
        const viewportMeta = document.querySelector('meta[name="viewport"]');
        // 保存原配置，退出全屏时要恢复
        window.__originalViewport = viewportMeta.getAttribute('content');
        viewportMeta.setAttribute('content', `width=device-width, height=${window.innerHeight}, initial-scale=1, user-scalable=no`);
      });
    }
  }
  // 退出全屏时恢复原视口配置
  document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement && window.__originalViewport) {
      document.querySelector('meta[name="viewport"]').setAttribute('content', window.__originalViewport);
      delete window.__originalViewport;
    }
  });
  

• 用visualViewport获取真实视口
  Chrome的visualViewport API能拿到真正的可视区域尺寸，不受地址栏的动态调整干扰，直接用它来做布局计算：

  window.visualViewport.addEventListener('resize', () => {
    const realHeight = window.visualViewport.height;
    // 用realHeight更新你的页面布局
    adjustContainerHeight(realHeight);
  });
  

如果上面的方法都暂时不适用，还有个临时的CSS规避办法：给全屏容器设置height: 100vh加overflow: hidden，强制容器高度不跟着异常resize变：

.fullscreen-wrap {
  height: 100vh;
  overflow: hidden;
}

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