iOS WebClip 可将网站添加到主屏幕并以类 App 方式打开。若安装后仍看到 Safari 地址栏，或页面未铺满屏幕，通常与描述文件配置和网站 PWA 标签两层设置有关。本文说明原因、平台侧操作与网站侧代码。

两层「全屏」不要混淆

层级作用谁负责
描述文件 FullScreen隐藏 Safari 地址栏与底部工具栏打包时选 iOS WebClip 高级版
网页 PWA meta以 Web App 模式渲染、适配刘海屏网站 <head>，或平台中转页（高级版+禁止缩放）

注意：「全屏」指隐藏 Safari 浏览器 UI，不包含隐藏 iOS 系统状态栏（时间、信号、电量）。详见下文。

能隐藏顶部状态栏吗？（信号、电量、时间）

不能完全隐藏。WebClip 本质是主屏幕快捷方式 + Safari 内核，不是原生 App，苹果不允许通过描述文件或网页代码彻底关掉系统状态栏。

能力效果WebClip 是否支持
全屏（高级版 FullScreen）隐藏 Safari 地址栏与底部工具栏✅ 支持
状态栏样式（black-translucent）状态栏半透明，内容可延伸到顶部，但图标仍可见⚠️ 需网站加 meta
彻底隐藏状态栏信号、电量、时间全部不显示❌ 不支持

若希望尽量沉浸，可在网站 <head> 使用 apple-mobile-web-app-status-bar-style 设为 black-translucent，并配合 viewport-fit=cover 与 env(safe-area-inset-top) 让页面内容铺到状态栏下方。这只能让状态栏「叠在页面上」，无法让状态栏消失。

若业务必须完全无状态栏，WebClip 无法满足，需考虑原生 IPA 方案（平台 IPA 打包暂未开放，且上架 App Store 对隐藏状态栏亦有限制）。

平台侧：选择高级版

在「网站打包」选择 iOS WebClip 后，打包版本请选高级版（含全屏与禁止缩放）。基础版生成的描述文件中 FullScreen 为 false，从主屏幕打开仍会显示浏览器 UI。

高级版开启「禁止缩放」时，平台会通过中转页自动注入 PWA meta，再加载您的目标网址；若仅选高级版全屏、未开禁止缩放，则直接打开目标站，此时网站须自行添加下方代码。

网站侧：PWA 全屏代码（放入 <head>）

<!-- 以 Web App 模式运行，隐藏 Safari 工具栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 视口：禁止缩放 + 适配刘海屏 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

<!-- 可选：状态栏样式 default / black / black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- 可选：主屏幕图标，建议 180×180 -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

安全区 CSS（适配 iPhone 刘海与底部横条）

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

正确打开方式

排查清单

证书与签名问题请参阅《iOS WebClip 证书获取 FAQ》；选型请参阅《IPA 与 WebClip 区别》。