theme-color meta标签必须静态写在head中且紧贴title后才生效，仅Android Chrome/Edge等支持，iOS Safari完全不支持；PWA manifest的theme_color会覆盖它。
theme-color meta 标签写在哪才生效
必须放在 <head> 里，且越靠前越好——最好在 <title> 之后、其他 <meta> 之前。浏览器解析到它就立即应用，晚了可能被忽略或延迟渲染。
- 只对支持该特性的浏览器生效（Chrome/Edge/Opera on Android，Safari 不支持）
- 不能写在
<body>或动态插入的 DOM 中，JS 插入的<meta name="theme-color">大概率无效 - 如果页面有 PWA manifest 文件，
theme_color字段会覆盖 meta 标签，优先级更高
theme-color 的值怎么写才被识别
只接受十六进制颜色值（带 #）、rgb()、rgba()，不支持命名色（如 "red"）或 hsl()。透明度在 rgba() 中有效，但部分安卓版本会忽略 alpha 通道，直接取纯色。
- 推荐写法：
<meta name="theme-color" content="#4285f4"> - 合法但风险高：
<meta name="theme-color" content="rgb(66, 133, 244)">（某些旧版 Chrome 可能不解析） - 无效写法：
<meta name="theme-color" content="blue">、<meta name="theme-color" content="hsl(210, 100%, 60%)"> - 注意：深色模式下不会自动适配，需配合媒体查询手动切换（见下一条）
如何适配深色模式下的 theme-color
用 media 属性做条件声明，浏览器会根据系统偏好自动选择。但注意：仅当用户开启系统深色模式且页面未强制覆盖时才触发。
- 写法示例：
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
- 必须两个
<meta>并存，不能合并成一个标签 - 如果页面 JS 强制设了 document.documentElement.classList，但没同步改
<meta>，状态栏颜色不会响应式变化 - 部分安卓 WebView（如微信内置浏览器）完全忽略
media查询，只认第一个<meta>
为什么改了 theme-color 状态栏颜色还是没变
最常见原因是缓存或加载时机问题——不是代码写错，而是浏览器没重读 meta 标签。
立即学习“前端免费学习笔记（深入）”；
- 硬刷新（Ctrl+F5 / Cmd+Shift+R）才能让新
theme-color生效，普通刷新常沿用旧缓存 - PWA 安装后，首次加载用的是 manifest 中的
theme_color，修改 meta 标签对已安装的 PWA 无效 - 使用 service worker 缓存了 HTML？确保 HTML 文件没被强缓存（检查 response header 中的
Cache-Control） - 安卓 12+ 引入了更严格的 color-scheme 检测逻辑，若页面声明了
<meta name="color-scheme" content="light dark">却没提供对应 theme-color，可能 fallback 到默认灰色
