ios safari pwa 中 theme-color 完全无效，apple 未实现该标准；唯一可控方案是 manifest.json 的 status_bar 字段（ios 15.4+），配合 apple-mobile-web-app-status-bar-style 仅控制明暗。
在 iOS Safari 的 PWA 中，theme-color 根本不生效 —— 你改了也没用，不是代码问题，是 Apple 没实现。 真正能起作用的只有两条路径：主屏幕安装后的 apple-mobile-web-app-status-bar-style（仅控制明暗，不控色），或 PWA manifest.json 中的 status_bar 字段（iOS 15.4+ 支持真色）。Android Chrome 则依赖 theme-color，但有严苛前提。
为什么 theme-color 在 iPhone 上完全无效
这不是兼容性 bug，而是 Apple 明确未实现该标准。所有版本的 iOS Safari（包括最新 iOS 18）都会忽略 <meta name="theme-color">。你在 DevTools 里看到标签存在、值也正确，但状态栏始终是默认灰白或继承自 apple-mobile-web-app-status-bar-style 的固定样式。
- 它只对 HTTPS 下的 Chromium 内核 Android 浏览器有效（Chrome、Edge、Samsung Internet）
- 即使在 Android 上，也必须满足四个条件：
HTTPS或localhost；<meta>静态写在最前面；值为纯十六进制（如#4285f4，不支持rgb()或透明度）；且未被manifest.json中的theme_color覆盖 - 在 iOS 上，无论你怎么调整
theme-color，它和状态栏颜色零关系
apple-mobile-web-app-status-bar-style 的真实能力与限制
这个 meta 标签是 iOS 唯一原生支持的状态栏控制手段，但它**不设置背景色，只控制文字/图标明暗**，且仅在用户“添加到主屏幕”并以全屏 PWA 模式启动时才生效。
- 必须配合
<meta name="apple-mobile-web-app-capable" content="yes">才能激活 - 可选值只有三个：
default（浅色文字，灰白背景）、black（深色文字，黑灰背景）、black-translucent（深色文字，半透黑色背景，内容会延伸至状态栏下） -
black-translucent是唯一能让页面内容“上浮”进状态栏的选项，但背景仍是系统级半透黑，无法指定 HEX 色值 - iOS 15+ 中，如果同时写了
theme-color，它会**静默覆盖**apple-mobile-web-app-status-bar-style的效果 —— 这是很多开发者调试失败的根源
真正可控的方案：PWA manifest.json 的 status_bar
iOS 15.4 起，Safari 开始支持 manifest.json 中的 status_bar 字段，这是目前唯一能在 iOS PWA 中指定精确背景色的方式：
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"status_bar": {
"background_color": "#4285f4",
"style": "light"
}
}
-
status_bar.background_color接受任意十六进制值（如#4285f4），直接控制状态栏背景 -
status_bar.style控制文字/图标颜色：light（白字）或dark（黑字）—— 它不会自动根据背景亮度判断，必须手动配对 - 该字段仅在用户将 PWA 添加到主屏幕后生效；普通 Safari 标签页中仍无效
- 注意：如果 manifest 中同时存在
theme_color，它只影响 Android 和桌面 PWA，对 iOSstatus_bar无影响
Android 与 iOS 的混合配置实践
要同时兼顾两个平台，不能靠单一 meta 标签，而需分层声明：
- HTML 中只保留必要 meta：
<meta name="apple-mobile-web-app-capable" content="yes">和<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">（为 iOS 提供 fallback） - 彻底移除
<meta name="theme-color">—— 它在 iOS 无用，在 Android 又易被 manifest 覆盖，徒增干扰 - 在
manifest.json中同时定义：theme_color（用于 Android）、background_color（启动屏）、status_bar（用于 iOS 15.4+） - 深色模式适配需分别处理：
status_bar不支持 media 查询，所以得准备两套 manifest 并通过服务端或 JS 动态加载；Android 的theme-color则可用media="(prefers-color-scheme: dark)"声明双 meta（但仅限静态）
最常被忽略的一点：iOS 状态栏颜色变更不会实时反映在开发调试中。你必须完全退出 PWA（双击 Home / 从 App Switcher 清除），重新从主屏幕图标启动，才能看到 status_bar 生效。缓存、热更新、甚至 Safari 的预加载机制都可能让你误判配置是否成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
