Android端访问PWA日程应用时body底部出现多余空白如何解决？

这个问题属于移动端PWA开发的典型适配问题，核心原因是安卓系统导航栏/手势操作栏占位未被正确计入视口高度计算，你可以按以下优先级尝试：

• 第一步：适配安全区域变量
  首先修改页面viewport元标签，新增viewport-fit=cover声明：

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

  随后给应用最外层容器添加CSS样式，主动排除底部安全区域高度：

  .app-container {
    /* 兼容旧版webkit */
    height: calc(100vh - constant(safe-area-inset-bottom, 0));
    /* 标准写法 */
    height: calc(100vh - env(safe-area-inset-bottom, 0));
  }
  

• 第二步：动态计算视口高度（第一种方案不生效时使用）
  安卓部分机型对100vh的计算默认包含系统栏高度，可通过JS动态获取实际可用高度赋值给CSS变量：

  function setAppViewportHeight() {
    const viewportHeight = window.innerHeight;
    document.documentElement.style.setProperty('--app-height', `${viewportHeight}px`);
  }
  // 页面初始化时赋值
  setAppViewportHeight();
  // 监听横竖屏切换、窗口大小变化重新计算
  window.addEventListener('resize', setAppViewportHeight);
  window.addEventListener('orientationchange', setAppViewportHeight);
  

  对应CSS中最外层容器使用该变量设置高度：

  .app-container {
    height: var(--app-height, 100vh);
    overflow: hidden;
  }
  

• 第三步：排查PWA配置
  检查项目manifest.json文件，确认display字段设置为standalone，而非browser，该配置会让PWA启动时以独立应用形态适配系统安全区域。修改配置后需要删除原有桌面快捷方式，清理浏览器缓存后重新添加到桌面才可生效。
• 额外排查点
  确认页面最外层容器没有额外的margin-bottom、padding-bottom属性，底部固定定位元素的bottom值未被额外赋值撑高容器。

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