HTML meta theme-color 设置移动端工具栏颜色

先向各位前端开发者坦白一个令人困扰的现实：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 三个，无法指定具体颜色。真正要自定义颜色，需要依靠页面顶部