Android Chrome全屏PWA存在48px溢出问题，如何解决？

这个48px的溢出是Android Chrome全屏PWA的典型问题，本质是Chrome为系统导航栏/状态栏预留了占位空间，即便设置了display: fullscreen也会出现，以下是直接有效的解决步骤：

1. 修复Viewport配置 #

给meta viewport标签添加viewport-fit=cover，让页面完全覆盖设备物理视口，不再给系统UI留默认占位：

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

2. 重置CSS的安全区域与高度 #

替换现有CSS，用100vw/100vh配合安全区域变量，彻底消除额外边距：

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  /* 重置系统安全区域的默认边距 */
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

* {
  box-sizing: border-box;
}

3. 优化JS的视口高度计算 #

放弃window.visualViewport.height，改用window.innerHeight（更准确的可用窗口高度），同时监听visualViewport的resize事件适配动态系统UI变化：

function setViewportHeight() {
  const viewportHeight = window.innerHeight;
  document.documentElement.style.height = `${viewportHeight}px`;
  document.body.style.height = `${viewportHeight}px`;
}

// 绑定所有必要的事件
window.addEventListener('load', setViewportHeight);
window.addEventListener('resize', setViewportHeight);
window.addEventListener('orientationchange', setViewportHeight);
// 适配Chrome的视觉视口变化
window.visualViewport?.addEventListener('resize', setViewportHeight);

4. 检查Web Manifest配置 #

确保manifest里的display严格设为fullscreen，可添加orientation锁定避免旋转适配问题：

{
  "display": "fullscreen",
  "orientation": "portrait-primary", // 根据需求设置，比如landscape-primary
  "start_url": "/",
  "name": "Fullscreen Web App",
  "short_name": "Fullscreen App"
}

关键说明 #

之前设置height:100%会受Chrome内部视口计算逻辑影响，window.visualViewport.height仅返回视觉可见区域高度，未考虑全屏模式下Chrome隐藏系统UI后的实际窗口高度。viewport-fit=cover才是让页面真正铺满屏幕的核心配置。

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