Chrome 移动颜色栏主题颜色元标记不起作用答案

【问题标题】：Chrome Mobile color bar theme-color meta tag not workingChrome 移动颜色栏主题颜色元标记不起作用
【发布时间】：2016-02-15 13:41:45
【问题描述】：

我正在尝试实现theme-color 元标记，但我看不到它在装有 Chrome 和 Android Lollipop 的摩托罗拉智能手机上工作。

我从一个theme-color标签开始，然后我写了其他标签，但根本没有成功。

<meta name="theme-color" content="#5f5eaa">
<meta name="msapplication-TileColor" content="#5f5eaa">
<meta name="msapplication-navbutton-color" content="#5f5eaa">
<meta name="apple-mobile-web-app-status-bar-style" content="#5f5eaa">

此网页通过 HTTPS 运行，证书无效（它是一个 Intranet 工具），但我认为它不会影响该功能，对吧？

【问题讨论】：

见crbug.com/500970和crbug.com/474371
这里也有证书问题，看不到颜色。可能是相关的......
用 HTTPS 测试了它是证书问题的理论，发现这确实是它不起作用的原因。使用有效证书通过 HTTPS 正常工作。
同样的问题 - 使用自签名证书或无效证书时无效，但适用于有效证书
您是否尝试过使用 Manifest 代替？这也适用于常规 HTTP。 developers.google.com/web/updates/2015/08/…

标签： html google-chrome

【解决方案1】：

根据@Lodmot 对 Android 11 的回答，刚刚对此进行了测试。有一点（但很重要）需要说明：

不要不依赖“系统默认”设置！在省电模式下，主题被强制设置为“深色”，因此您的theme-color 将不起作用。

要正确测试您的代码，请将 Chrome 的主题手动设置为“Light”。

【讨论】：

【解决方案2】：

这是支持此元标记的表格。 https://caniuse.com/#feat=meta-theme-color

始终检查实际的浏览器版本。

【讨论】：

【解决方案3】：

就我而言，它实际上是我手机使用的主题。在 Android 的深色主题中，主题颜色元标记 不起作用（我在写这篇文章时使用的是 Android 10）。切换到 Chrome 中的 light 主题，你会看到它工作。 :)

【讨论】：

这解决了我的问题！不知道 Chrome android 不允许在深色模式下使用主题颜色。有没有办法克服这个问题？
这真是一个很好的收获。我一直忘记它并多次来到这里。

【解决方案4】：

请检查您的浏览器主题？可能是那里启用了暗模式！

【讨论】：

【解决方案5】：

chrome 要求您拥有有效的证书，主题栏颜色才能正常工作

【讨论】：

基本 HTTP 似乎也可以工作

【解决方案6】：

根据我的测试经验需要有效的认证。

我在本地主机上测试时遇到了同样的问题（即，地址栏背景颜色在移动设备上没有改变），但我一推送到生产环境（即生产环境具有有效的认证），我就能够查看更改反映在安卓测试设备上。

使用的 Android 设备：OnePlus 3T、华为、旧三星手机。都是积极的结果。

【讨论】：

嗨，我有一个有效的证书，但由于某种原因，我没有在 iphone 上着色地址栏。他们在 android 上运行良好
@sss999 试试这个： <meta name="theme-color" content="#4285f4">  <meta name="msapplication-navbutton-color" content="#4285f4">  <meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">