iOS独立PWA添加到主屏幕后底部导航栏下方出现白边，100dvh无法配合viewport-fit=cover填满全屏的解决方法咨询

我正在开发一个Nuxt 4的PWA，通过Safari「添加到主屏幕」安装在iOS上。这个应用有个底部导航栏，本应该紧贴屏幕底部，用它的背景填充主屏幕指示器（安全区域）的区域，但现在导航栏和物理屏幕边缘之间有个明显的白边。

我的当前配置 #

视口元标签 #

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

Apple PWA元标签 #

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

PWA清单 #

使用了"display": "standalone"配置。

CSS基础层 #

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

html {
  overflow: hidden;
}

body {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
  overscroll-behavior: none;
  overflow: hidden;
  margin: 0;
}

布局结构（包裹所有页面） #

<div class="h-[100dvh] bg-white flex flex-col overflow-hidden">
  <main class="flex-1 overflow-hidden">
    <!-- 页面内容（每个页面有自己的可滚动区域） -->
  </main>
  <BottomNav />
</div>

BottomNav是这个h-[100dvh]flex容器里的flex子元素，没有用position: fixed定位。我用padding-bottom: max(12px, env(safe-area-inset-bottom))来把导航内容推到主屏幕指示器上方，同时让它的背景填满安全区域。

底部导航的CSS #

.bottom-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 30;
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-top: 8px;
}

遇到的问题 #

在iOS独立PWA（添加到主屏幕）里，100dvh似乎解析成了不包含底部安全区域内边距的视口高度（带主屏幕指示器的iPhone大概是34px）。这就导致整个flex布局——包括底部导航和它的安全区内边距——都被限制在一个比物理屏幕短约34px的盒子里，结果就是导航栏底部和屏幕边缘之间出现白边。

我已经尝试过的方法 #

• 给body设置padding-bottom: env(safe-area-inset-bottom)：用body背景填满了空隙，但布局的100dvh超出了body内容区域，加overflow: hidden会把它裁剪掉；去掉overflow的话body又能滚动，破坏了固定头部的效果。
• 给body设置position: fixed; inset: 0：在WebKit里，fixed定位的body还是把height: 100%解析成安全区视口的高度，不是物理全屏，白边依然存在。
• 给Nuxt的包裹div（#__nuxt）设置position: fixed; inset: 0：结果和上面一样，还是有白边。
• 直接给布局根div设置position: fixed; inset: 0：这确实能填满屏幕，但子页面里的百分比高度（比如h-full）就失效了，因为Nuxt插入了一些中间包裹元素（比如Suspense、router-view），这些元素没有设置明确的高度。
• 给html/body设置height: -webkit-fill-available：在独立PWA里完全没效果。
• 把布局上的h-[100dvh]换成min-h-screen：iOS独立模式下100vh有同样的视口高度问题；而且还会导致页面头部跟着内容滚动，没法保持固定。

期望的效果 #

应用能完全填满物理屏幕，从边缘到边缘。底部导航的padding-bottom: max(12px, env(safe-area-inset-bottom))应该把它的背景延伸到主屏幕指示器区域，没有可见的白边。头部要固定在顶部，只有头部和导航栏之间的内容区域可以滚动。

环境信息 #

• iOS 16（带主屏幕指示器的iPhone）
• Safari → 添加到主屏幕（独立PWA）
• Nuxt 4（^4.3.0）搭配@vite-pwa/nuxt
• Tailwind CSS

请问怎么让100dvh（或者任何CSS方法）在开启viewport-fit=cover的iOS独立PWA里填满整个物理屏幕？

备注：内容来源于stack exchange，提问作者JustStevenz