HTML的meta标签name为theme-color怎么改变移动端浏览器的地址栏颜色-html教程-PHP中文网

theme-color 仅在 chrome、edge、samsung internet 和 firefox（v96+）android 版生效，ios safari 完全不支持；需 https、置于 head 靠前、纯十六进制值、且可能被 manifest 中 theme_color 覆盖。

html的meta标签name为theme-color怎么改变移动端浏览器的地址栏颜色

它只在部分 Android 浏览器上生效，iOS Safari 完全无视，写得再准也没用。

theme-color 在哪些浏览器真正起作用

仅限 Chrome for Android、Edge for Android、Samsung Internet，以及 Firefox for Android（v96+）。iOS Safari 从不解析 meta name="theme-color"，无论你写 #ff6b6b 还是 rgb(255,107,107)，地址栏颜色都不会变——这不是 bug，是 Apple 根本没实现这个特性。Firefox Android 支持但行为保守，通常只影响工具栏，不控制状态栏。

写了却没变色？大概率踩了这四个硬条件之一

页面跑在 HTTP 下 → Chromium 内核直接跳过解析，必须 HTTPS 或 localhost
<meta name="theme-color"> 没放在靠前位置 → 建议紧贴 <title></title> 后立即写，晚了可能被忽略
content 值用了 rgb(66, 133, 244)、var(--primary) 或带空格的 " #4285f4 " → 只认纯十六进制格式，如 #4285f4 或简写 #45f，不支持透明度、命名色、CSS 变量
网站已注册 PWA，且 manifest.json 中定义了 theme_color → 此时该字段会覆盖 HTML 中的 meta 标签，优先级更高

深色模式下怎么“适配”地址栏颜色

浏览器不会监听 prefers-color-scheme 并重绘地址栏，但支持静态 media 查询匹配：

必须在中并列写两条 <meta name="theme-color"> 标签：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">

注意：两个标签都得静态存在于 HTML 源码里，JS 动态插入无效；用户中途切换系统主题，地址栏颜色不会更新；旧版 Android Chrome 不支持 media 属性，建议额外加一条无条件 fallback：<meta name="theme-color" content="#ffffff">。

iOS 上根本没法用 theme-color，但还有两条有限路径

别试图用 theme-color 控制 iOS 状态栏背景色——它不生效。可用方案只有：

<meta name="apple-mobile-web-app-status-bar-style" content="black">：只控制文字/图标颜色（default / black / black-translucent），不改背景色，且仅在「添加到主屏幕」或 PWA 全屏模式下生效
配合 <meta name="apple-mobile-web-app-capable" content="yes"> 启用全屏模式，再靠顶部 <header></header> 的 background-color + viewport-fit=cover + padding-top 视觉模拟状态栏背景