Android Chrome的URL预取导致页面高度异常，破坏粘性页脚

确认：这是已知Bug #

是的，这是Android版Chrome中存在的已知预取（prefetch）相关布局Bug。核心原因是预取阶段浏览器对视口高度的计算出现偏差，页面加载完成后未自动修正该值，导致页面容器高度异常放大，最终将页脚挤压到可视区域之外。该Bug覆盖多个Chrome版本，且对Bootstrap、MDN推荐等主流粘性页脚实现方案均有影响。

可行的解决办法 #

以下是几种经过验证的修复方案：

1. 监听视口变化强制触发重绘 #

通过监听Chrome移动端专属的visualViewport变化事件，结合通用resize事件，强制页面重绘以修正高度计算：

// 处理Chrome移动端视口变化
if ('visualViewport' in window) {
  window.visualViewport.addEventListener('resize', () => {
    document.body.style.display = 'none';
    document.body.offsetHeight; // 触发重绘
    document.body.style.display = '';
  });
}
// 兼容通用resize场景
window.addEventListener('resize', () => {
  requestAnimationFrame(() => {
    const root = document.documentElement;
    root.style.height = 'auto';
    root.offsetHeight;
    root.style.height = '100vh';
  });
});

2. 改用弹性布局实现粘性页脚 #

放弃依赖100vh的固定视口高度方案，使用flexbox动态分配空间，从根源避免视口高度偏差的影响：

html, body {
  height: 100%;
  margin: 0;
}
#page-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
#content-wrap {
  flex: 1; /* 让内容区域自动填充剩余空间 */
}
.footer {
  flex-shrink: 0; /* 固定页脚高度，不被挤压 */
}

3. 禁用页面预取（极端场景） #

若上述方案无效，可通过meta标签禁止浏览器预取当前页面，但此方法会影响加载性能，仅建议作为最后手段：

<meta http-equiv="x-dns-prefetch-control" content="off">

检测异常并自动刷新页面 #

可通过对比window.innerHeight与visualViewport.height的差值判断高度异常，若差值超过阈值则触发页面刷新：

window.addEventListener('load', () => {
  setTimeout(() => {
    if ('visualViewport' in window) {
      const viewportDiff = Math.abs(window.innerHeight - window.visualViewport.height);
      // 设定100px作为异常阈值，可根据设备调整
      if (viewportDiff > 100) {
        window.location.reload();
      }
    }
  }, 500); // 延迟执行确保页面完全加载
});

注意：自动刷新可能影响用户体验，建议优先使用重绘或布局调整方案，仅在必要时启用此功能。

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