HTML代码中meta设置状态栏颜色控制-html教程-PHP中文网

meta name="theme-color"仅在https或localhost下的chromium内核android浏览器（chrome、edge、samsung internet）及pwa安装后生效，ios safari完全不支持；需静态置于head靠前、十六进制色值，且manifest中theme_color会覆盖它。

html代码中meta设置状态栏颜色控制

meta name="theme-color" 在移动端的实际效果

这个 meta 标签只对部分 Android 浏览器（Chrome、Edge、Firefox）和 PWA 有效，iOS Safari 完全忽略它。也就是说，你在 iPhone 上无论怎么写 <meta name="theme-color" content="#ff6b6b">，状态栏颜色都不会变——它始终沿用系统默认（通常是白色或深色模式下的黑色）。

它影响的是浏览器 UI 的顶部状态栏背景（不是网页内容区）
必须放在中，且最好在其他 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 和背景色“模拟”状态栏着色：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

content 中加入 status-bar-style=black-translucent 或 black（仅 Safari 识别），会让状态栏文字变白，但底色仍透明
真正让状态栏“看起来”有颜色，得靠给或首屏 <header></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 为准