iOS端PWA底部导航栏与屏幕间间隙问题求助

问题说明 #

开发iOS端PWA时，底部导航栏和屏幕底部（原Safari地址栏位置）之间出现一大块空白。把PWA加到主屏幕后，关掉Safari和PWA再重启，空白会消失，但这体验太差。目前已经加了相关meta标签，还是没解决，标签代码如下：

<Head>
    <meta name='theme-color' content='#fff' />
    <meta name='apple-mobile-web-app-capable' content='yes'></meta>
    <meta name='viewport' content='width = device-width'></meta>
    <meta name='viewport' content='height = device-height'></meta>
    <meta
      name='viewport'
      content='initial-scale = 1.05, user-scalable = yes'
    ></meta>
    <meta
      name='apple-mobile-web-app-status-bar-style'
      content='black-translucent'
    ></meta>
    <meta name='emotion-insertion-point' content='' />
  </Head>

（截图显示：应用底部导航栏下方存在明显空白，未贴合屏幕底部）

解决步骤 #

• 合并viewport标签，添加安全区域适配
  你现在写了多个viewport标签，浏览器只会认最后一个，这会搞乱视口设置。把它们合并成一个，加上viewport-fit=cover参数，这是让页面铺满整个屏幕的关键：

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

• 用CSS适配底部安全区域
  给底部导航栏加个内边距，适配iOS的底部安全区域，同时确保导航栏固定在底部：

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  

• 检查Manifest配置
  确认manifest.json里的display属性设为standalone或者fullscreen，保证PWA以独立模式运行：

  {
    "display": "standalone",
    "start_url": "/",
    "name": "你的应用名称",
    "short_name": "应用简称"
    // 其他图标等配置按需添加
  }
  

• 强制刷新视口（可选）
  有时候Safari缓存会导致视口没生效，可在页面加载时强制更新：

  window.addEventListener('load', () => {
    if (navigator.standalone) {
      const viewport = document.querySelector('meta[name="viewport"]');
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no');
    }
  });
  

• 核对启动画面配置
  确保apple-touch-startup-image的尺寸符合设备要求，启动画面尺寸不对也可能导致布局异常。

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