PWA全屏模式页面高度超出视口问题求助

针对Chrome 114.0.5735.130在Android 9 Redmi 6A设备上，全屏模式PWA出现页面高度莫名超过视口、空白页也有滚动条、fixed元素随滚动偏移的问题，以下是几个实测有效的修复方法：

方案1：强制锁定根元素高度并禁用全局滚动 #

适合无全局滚动需求的场景，直接在全局CSS里设置：

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

如果需要局部滚动，给对应容器单独加overflow-y: auto和max-height: 100vh即可。

方案2：修正视口适配与安全区域边距 #

在HTML的视口meta标签中添加viewport-fit=cover，配合安全区域变量修正边距：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

然后补充CSS：

body {
  margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
  overflow-x: hidden;
}

这个方法能修正Chrome在全屏模式下的视口计算偏差，避免高度溢出。

方案3：JS动态修正页面高度 #

如果CSS方案无效，用JS实时获取真实视口高度赋值给body：

function fixViewportHeight() {
  document.body.style.height = `${window.innerHeight}px`;
}
// 页面加载、窗口 resize、显示模式变化时都触发
window.addEventListener('load', fixViewportHeight);
window.addEventListener('resize', fixViewportHeight);
window.addEventListener('displaymodechange', fixViewportHeight);

直接绕过Chrome的高度计算bug，强制页面高度匹配视口。

方案4：调整manifest显示模式（妥协方案） #

如果对全屏要求不是绝对严格，可以把manifest里的display从fullscreen改成standalone：

{
  "display": "standalone"
}

该模式会保留系统状态栏，但能规避全屏模式下的高度计算问题。

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