iOS Safari下PWA设置viewport-fit=cover无法覆盖状态栏刘海区域怎么办

你已有的配置缺少apple-mobile-web-app-status-bar-style元标签及CSS安全区域适配，补充以下配置即可生效：

1. 补充元标签配置 #

在head中新增以下meta标签：

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

注意：只有content取值为black-translucent时，状态栏才会变为半透明，允许页面内容延伸到状态栏/刘海区域，取值为default或black时状态栏为不透明块，页面内容默认从状态栏下方开始渲染。

2. 补充CSS适配 #

• 首先重置全局边距，确保根容器占满全部视口：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

• 若需要核心内容不被状态栏/刘海遮挡，给页面内容容器添加安全区域内边距：

.content-wrapper {
  /* 顶部内边距取系统安全区域高度，兜底值适配无刘海老设备 */
  padding-top: env(safe-area-inset-top, 20px);
  /* 左右、底部可按需添加对应安全区域内边距 */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

3. 生效验证注意事项 #

• 配置完成后需要将PWA重新添加到主屏幕，旧的主屏幕快捷方式会缓存旧的元标签配置，直接打开不会生效
• 仅在PWA独立运行模式下生效，Safari普通标签页打开时不会触发全屏状态栏覆盖效果

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