Android Chrome全屏后window.innerHeight未更新，需触摸才生效的问题

问题成因 #

这是Android Chrome特有的渲染机制bug：调用document.documentElement.requestFullscreen()进入全屏后，浏览器隐藏底部导航栏，但没有主动触发视口尺寸的重计算，而是将这个更新动作延迟到用户产生触摸等交互行为后才执行。因此初始获取的window.innerHeight仍然是包含导航栏的旧高度，差值正好是导航栏的像素高度。

无需触摸即可强制更新的解决方法 #

以下是几种经过验证的可行方案：

• 触发DOM重绘强制更新
  在fullscreenchange事件回调中，通过给根元素添加一个不影响布局的CSS变换触发重绘，迫使浏览器重新计算视口尺寸：

  document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
      // 用translateZ触发GPU重绘
      document.documentElement.style.transform = 'translateZ(0)';
      // 立即移除样式，避免影响后续布局
      setTimeout(() => {
        document.documentElement.style.transform = '';
      }, 0);
      // 此时获取的innerHeight即为正确值
      console.log('正确高度:', window.innerHeight);
    }
  });
  

• 使用visualViewport API替代innerHeight
  Android Chrome支持window.visualViewport API，它能实时反映当前可视区域的实际尺寸，全屏切换时会自动更新，无需额外触发：

  document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
      console.log('正确高度:', window.visualViewport.height);
    }
  });
  

• 延迟获取高度
  利用requestAnimationFrame或短延迟的setTimeout，给浏览器预留足够的视口更新时间后再获取高度：

  document.documentElement.requestFullscreen().then(() => {
    requestAnimationFrame(() => {
      console.log('正确高度:', window.innerHeight);
    });
  });
  

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