meta name="theme-color"仅在HTTPS或localhost下的Chromium内核Android浏览器（Chrome、Edge、Samsung Internet）及PWA安装后生效，iOS Safari完全不支持；需静态置于head靠前、十六进制色值，且manifest中theme_color会覆盖它。
meta name="theme-color" 在移动端的实际效果
这个 meta 标签只对部分 Android 浏览器（Chrome、Edge、Firefox）和 PWA 有效，iOS Safari 完全忽略它。也就是说，你在 iPhone 上无论怎么写 <meta name="theme-color" content="#ff6b6b">，状态栏颜色都不会变——它始终沿用系统默认（通常是白色或深色模式下的黑色）。
- 它影响的是浏览器 UI 的顶部状态栏背景（不是网页内容区）
- 必须放在
<head>中，且最好在其他meta之前 -
content值支持十六进制（如#333）、RGB（rgb(51, 51, 51)）、RGBA（但 alpha 会被忽略） - 如果页面加载中或滚动时颜色突变，大概率是没加
viewport或 CSS 里有强制重绘干扰
iOS 状态栏颜色只能靠 viewport + CSS 配合
iOS 没有 theme-color，但可以通过 <meta name="viewport" content="..."> 的 status-bar-style 参数间接控制文字/图标颜色，再配合 safe-area-inset-top 和背景色“模拟”状态栏着色：
-
content中加入status-bar-style=black-translucent或black（仅 Safari 识别），会让状态栏文字变白，但底色仍透明 - 真正让状态栏“看起来”有颜色，得靠给
<body>或首屏<header>设置padding-top: env(safe-area-inset-top)，并叠加一个同色的background-color - 示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, status-bar-style=black">
然后 CSS：body { padding-top: env(safe-area-inset-top); background-color: #4a5568; }
Vue/React 项目中动态更新 theme-color 的坑
单页应用切换路由时，theme-color 不会自动更新，因为 DOM 中的 meta 标签不会被重新解析。必须手动操作：
- 不要用
document.write或直接 innerHTML 替换head，会破坏已有资源加载 - 正确做法是先查是否存在旧的
theme-color标签：document.querySelector('meta[name="theme-color"]') - 存在则修改其
content属性；不存在则新建并 append 到head - 注意 SSR 场景：服务端渲染时设的值可能和客户端不一致，建议只在
mounted或useEffect中更新 - 如果用了 PWA，
manifest.json中的theme_color优先级高于meta，两者不一致时以 manifest 为准
调试时看不到效果？先检查这三件事
- 当前设备是否为 iOS —— 是的话，
theme-color 直接无效，别浪费时间调它
- 页面是否通过 HTTPS 访问 —— Chrome 对非 HTTPS 页面禁用
theme-color（包括 localhost 以外的 http）
- 是否在桌面浏览器测试 —— 大多数桌面版 Chrome 已移除对
theme-color 的支持，仅保留移动端模拟器中的表现
theme-color 直接无效，别浪费时间调它theme-color（包括 localhost 以外的 http）theme-color 的支持，仅保留移动端模拟器中的表现真正起作用的颜色控制，往往不是靠一行 meta，而是 viewport、CSS 环境变量、PWA manifest 和 JS 动态注入的组合。漏掉其中一环，就容易以为“代码没生效”。
立即学习“前端免费学习笔记（深入）”；
