先向各位前端开发者坦白一个令人困扰的现实：theme-color 这个 meta 标签的实际覆盖面相当有限——它仅在 Chrome/Edge/Samsung Internet（Android 端）以及 Firefox Android（v96 及以上）上生效，iOS Safari 完全不予理会。此外还有一系列硬性约束：必须经由 HTTPS 协议加载、必须静态放置在 head 靠前的位置、色值只能使用十六进制（例如 #4285f4）或 rgb/hsl 函数表示，同时 PWA manifest 文件中的 theme_color 字段优先级更高，会覆盖 meta 中的设置。
theme-color meta 标签在哪些浏览器上生效
theme-color 仅作用于支持该规范的移动端浏览器，主要包括 Chrome for Android、Edge for Android 以及 Samsung Internet。iOS Safari 完全不支持 theme-color，即便写入页面也无法改变地址栏或状态栏颜色。Firefox Android 从 v96 起开始支持，但表现略有差异——它只影响工具栏，状态栏颜色不受影响。若你的目标用户大量使用 iOS 设备，仅靠 theme-color 远远不够。
正确的 meta 写法与常见误区
写法本身并不复杂： 必须位于 中，且必须为静态声明——通过 JavaScript 动态插入将无法生效。content 值只接受十六进制颜色（如 #ff6b35）、rgb() 或 hsl() 函数（如 rgb(66, 133, 244)），不支持命名色（例如 blue）、transparent 或含 alpha 通道的 rgba()。此外还有一个容易被忽视的细节：如果页面未启用视口缩放（即缺少 ），部分 Android 浏览器会直接忽略 theme-color。
- ✅ 正确：
- ❌ 无效：
- ❌ 无效：
- ❌ 无效：用 JS 插入
document.head.appendChild(...)
如何让 iOS 也能显示自定义状态栏颜色
iOS 并未提供 theme-color，但可通过 控制状态栏样式。不过前提是必须配合 启用“添加到主屏幕”模式后才会生效。换句话说，该设置仅影响全屏 PWA 场景，普通浏览器标签页中完全不起作用。而且 content 可选值只有 default、black、black-translucent 三个，无法指定具体颜色。真正要自定义颜色，需要依靠页面顶部 viewport-fit=cover 以及 padding-top 补偿来实现。
theme-color 与 PWA manifest 中的颜色配置关系
若你同时配置了 Web App Manifest 文件中的 "theme_color" 字段，Android Chrome 在用户将网站添加到主屏幕后，会优先使用 manifest 中的值；普通浏览场景下则仍使用 theme-color meta。两者互不冲突，但强烈建议保持一致。manifest 中的 theme_color 还会影响安装后桌面图标的背景色（特别是在 Android 上），因此不要只顾着改 meta 而忽略了 manifest。
容易被忽略的是：manifest 文件必须通过 正确引入，且响应头应包含 Content-Type: application/manifest+json，否则 Chrome 很可能静默忽略 theme_color 字段。
