在iOS的Safari中，当用户把网页“添加到主屏幕”并以独立应用形式打开时，网页顶部会显示系统状态栏。通过配置特定的meta标签，我们可以自定义这个状态栏的颜色风格，让WebApp看起来更原生、更协调。
一、必要的前提配置
自定义状态栏颜色并不是单独生效的，必须先告诉Safari该网页要以全屏独立应用的方式运行。这需要添加如下meta标签：
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
其中<meta>标签的name为apple-mobile-web-app-capable且content为yes时，网页从主屏幕打开将隐藏Safari默认工具栏，进入独立模式。
二、状态栏颜色的控制方式
在开启独立模式后，使用以下meta标签控制状态栏样式：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
该标签的content属性支持三种取值，效果如下：
| 取值 | 状态栏背景 | 文字颜色 | 说明 |
|---|---|---|---|
| default | 白色 | 黑色 | 普通白底黑字，内容从状态栏下方开始 |
| black | 黑色 | 白色 | 黑底白字，内容从状态栏下方开始 |
| black-translucent | 半透明黑 | 白色 | 状态栏悬浮半透明，页面内容会延伸到其下方 |
三、实际使用建议
- 若页面顶部有深色导航栏，可使用black让状态栏融为一体。
- 若希望内容全屏沉浸，可选black-translucent，但需注意顶部内容别被遮挡。
- default适合浅色简洁风格，兼容性最好。
四、完整示例
下面是一个完整的HTML头部配置示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的主屏幕WebApp</title> <!-- 开启独立应用模式 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 控制状态栏为黑底白字 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置主屏幕图标名称 --> <meta name="apple-mobile-web-app-title" content="示例"> </head> <body> <h1>欢迎使用</h1> </body> </html>
五、注意事项
状态栏样式仅在用户从主屏幕图标启动网页时生效，普通Safari浏览器内访问不会应用该配置。
另外，apple_mobile_web_app_status_bar_style在black-translucent模式下会让网页顶部被状态栏覆盖，开发时应为body预留顶部安全间距，例如使用CSS的env(safe-area-inset-top)来适配。
Safariapple-mobile-web-app-capablestatus_bar_style修改时间：2026-07-26 03:54:18