meta theme-color 仅在 Chrome/Edge/Firefox（Android）、PWA 独立窗口中稳定生效；iOS Safari 完全忽略，须用 apple-mobile-web-app-status-bar-style；值须为合法十六进制或 CSS 关键字，不支持 RGB/HSL/alpha。
meta theme-color 能改浏览器顶栏颜色，但只在部分场景生效，不是所有浏览器都支持，也不是所有页面状态都能触发。
哪些浏览器和平台真正支持 meta theme-color
目前稳定支持的主要是 Chrome（Android）、Edge（Android）、Firefox（Android）以及部分 PWA 启动后的全屏/独立窗口模式。iOS Safari 完全忽略该标签，哪怕加了也不会变状态栏颜色；桌面端 Chrome 也基本不响应（仅在安装为 PWA 后的独立窗口中可能生效）。
- Android Chrome：支持，且会同时影响地址栏、底部导航栏（启用沉浸式时）
- Firefox for Android：支持，但仅限于地址栏，不控制底部栏
- iOS Safari：无视
meta theme-color，必须用meta name="apple-mobile-web-app-status-bar-style" - 桌面浏览器：绝大多数不生效，除非是已安装的 PWA 独立窗口
meta theme-color 的写法和常见错误
必须放在 <head> 中，且值必须是合法十六进制色值（如 #4285f4）或 CSS 颜色关键字（如 red），不支持 RGB、HSL 或带 alpha 的 rgba()。
- ✅ 正确：
<meta name="theme-color" content="#3367d6"> - ❌ 错误：
<meta name="theme-color" content="rgb(51, 103, 214)">（解析失败，回退为默认灰） - ❌ 错误：
<meta name="theme-color" content="#3367d680">（含 alpha，被忽略） - ⚠️ 注意：多个
meta theme-color标签时，仅第一个生效；动态 JS 修改不会触发重绘
和 apple-mobile-web-app-status-bar-style 的关系
iOS 上想控制状态栏文字颜色（浅色/深色），必须用 Apple 专属 meta 标签，它和 theme-color 无关，也不替代后者。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="apple-mobile-web-app-status-bar-style" content="default">：黑字（默认） -
<meta name="apple-mobile-web-app-status-bar-style" content="black">：白字（背景需深） -
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">：半透+白字（已废弃，Safari 15+ 不再支持） - ⚠️ 这个标签只在「添加到主屏幕」且启用 Web App 模式后才起作用，普通 Safari 浏览器页无效
真正要让顶栏“变色”，得按平台拆开处理：Android 看 theme-color，iOS 看 apple-mobile-web-app-status-bar-style + 实际背景色配合，而桌面和非 PWA 场景基本没得选——别依赖它做核心 UI 一致性保障。
