theme-color不能统一控制所有移动端浏览器顶部条颜色，iOS Safari完全无视该标签；仅Android Chrome/Edge/Samsung Internet在HTTPS、静态置于head靠前、十六进制色值、无PWA theme_color覆盖四条件同时满足时生效。
它不能统一控制所有移动端浏览器顶部条颜色，iOS Safari 完全无视 theme-color，仅 Android Chrome/Edge/Samsung Internet 在满足硬性条件时生效。
为什么写了 theme-color 却没变色？
不是代码写错，而是平台或环境不满足前提：
- 正在用 iPhone 调试 ——
theme-color在所有 iOS Safari 版本中均被静默忽略，Apple 从未实现该特性 - 页面跑在 HTTP 下 —— Chromium 浏览器只在 HTTPS 或
localhost下解析该标签 -
没放在靠前位置（建议紧贴document.createElement('meta')）基本无效 - 用了
rgb(66, 133, 244)、var(--primary)或带透明度的#4285f480—— 只认十六进制格式（#4285f4或简写#45f） - 网站已注册 PWA，且
manifest.json中定义了theme_color字段 —— 它会直接覆盖 HTML 中的theme-color
Android Chrome 生效的四个必要条件
漏掉任意一条，theme-color 就静默失效：
- 必须通过 HTTPS 或
localhost访问 -
必须静态写死在最靠前位置（非 JS 注入） -
content值只能是十六进制色值（如#3367d6），不支持rgb()、hsl()、CSS 变量、命名色或透明度 - 若已注册 PWA，
manifest.json中的theme_color优先级更高，HTML 中的标签会被忽略
深色/浅色模式怎么“自动”适配？
浏览器不会监听 prefers-color-scheme 并重绘地址栏，但支持静态 media 查询匹配：
- 必须并列写两个
标签，都静态存在于中 - 例如：
和 - 用户中途切换系统主题，地址栏颜色不会更新 —— 没有事件可监听，也没有重绘机制
- 旧版 Android Chrome 不支持
media属性，建议额外加一个无条件 fallback：
iOS 状态栏颜色到底怎么调？
theme-color 对 iOS 完全无效，但还有两条有限路径：
-
：只控制文字/图标颜色（default/black/black-translucent），不改背景色，且仅在「添加到主屏幕」或 PWA 全屏模式下生效 - PWA manifest 中的
status_bar字段：仅当用户安装为 PWA 后才生效，可设背景色，但和theme-color无关，也不影响普通 Safari 标签页 - 没有等效于 Android 的
theme-color的背景色控制方案 —— 这不是你没找到，是 iOS 就没提供
最易被忽略的点：即使 theme-color 生效，状态栏文字/图标也可能突然变灰或发虚 —— 这是 Chromium 内核根据颜色感知亮度自动反色的结果，无法用 API 控制，只能手动调色验证（比如 #1e3a8a 比 #3367d6 更稳定出白字）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
