如何在HTML中利用meta标签的theme-color设置移动端工具栏颜色
theme-color仅在Chrome/Edge/Samsung Internet（Android）及Firefox Android（v96+）中生效，iOS Safari完全不支持；需HTTPS、静态置于head靠前、十六进制色值，且PWA manifest中theme_color会覆盖它。
theme-color meta 标签在哪些浏览器生效
theme-color 只对支持该规范的移动端浏览器起作用，主要是 Chrome for Android、Edge for Android 和 Samsung Internet。iOS Safari 完全不支持 theme-color，哪怕写上也不会改变地址栏或状态栏颜色。Firefox Android 从 v96 起支持，但行为略有差异（比如仅影响工具栏，不包括状态栏）。如果你的目标用户大量使用 iOS 设备，光靠 theme-color 是不够的。
正确的 meta 写法和常见错误
必须把 <meta name="theme-color" content="#4285f4"> 放在 <head> 中，且不能被 JavaScript 动态插入——动态添加无效。content 值只接受十六进制颜色（如 #ff6b35）、rgb() 或 hsl() 函数（如 rgb(66, 133, 244)），不支持命名色（blue）、transparent 或带 alpha 的 rgba()。另外，如果页面未启用视口缩放（即缺少 <meta name="viewport" content="width=device-width">），部分 Android 浏览器会忽略 theme-color。
- ✅ 正确：
<meta name="theme-color" content="#3a86ff"> - ❌ 无效：
<meta name="theme-color" content="blue"> - ❌ 无效：
<meta name="theme-color" content="rgba(58, 134, 255, 0.5)"> - ❌ 无效：用 JS 插入
document.head.appendChild(...)
如何让 iOS 也显示自定义状态栏颜色
iOS 没有 theme-color，但可通过 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 控制状态栏样式，配合 <meta name="apple-mobile-web-app-capable" content="yes"> 启用“添加到主屏幕”模式后才生效。注意：这个设置只影响全屏 PWA 场景，普通浏览器标签页中完全不起作用。content 可选值只有 default、black、black-translucent，无法指定具体颜色；真正控制颜色得靠页面顶部的 <header> 背景色 + viewport 的 viewport-fit=cover 配合 padding-top 补偿。
theme-color 与 PWA manifest 的 color 关系
如果你同时配置了 Web App Manifest 文件中的 "theme_color" 字段，Android Chrome 会优先使用 manifest 中的值（前提是用户已将网站添加到主屏幕），而普通浏览仍走 theme-color meta。两者不冲突，但建议保持一致。manifest 中的 theme_color 还会影响安装后桌面图标的背景色（尤其在 Android 上），所以别只改 meta 忽略 manifest。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的是：manifest 文件必须通过 <link rel="manifest" href="/manifest.json"> 正确引入，且响应头需包含 Content-Type: application/manifest+json，否则 Chrome 可能静默忽略 theme_color。
