Question

尚未找到有关此主题的任何内容。我真的很喜欢在Overview上更改地址栏和标题颜色的颜色吗？有没有简单的方法呢？

Chrome for Android enter image description here 。

我认为您需要安装Android 5.0 Lollipop才能使用此功能，并且Chrome的合并标签和应用设置为开启。

Answer 1

经过一番搜索后找到了解决方案。

您需要在包含<meta>的{{1}}中添加<head>标记，并将您的HEX代码作为内容值。例如：

name="theme-color"

Answer 2

您实际上需要3 meta个标签来支持Android，iPhone和Windows Phone

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

Answer 3

例如，将背景设置为您喜欢的/品牌颜色

将元属性添加到 HEAD 部分

中的HTML代码中

<head>
  ...
  <meta name="theme-color" content="Your Hexadecimal Code">
  ...
</head>

实施例

<head>
  ...
  <meta name="theme-color" content="#444444">
  ...
</head>

在下面的图片中，我刚才提到了Chrome如何采用您的主题颜色属性

Firefox OS，Safari，Internet Explorer和Opera Coast允许您使用元标记定义浏览器元素甚至平台的颜色。

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Safari特定样式

来自指南Documents Here

隐藏Safari用户界面组件

将支持apple-mobile-web-app的元标记设置为“是”以启用独立模式。例如，以下HTML使用独立模式显示Web内容。

<meta name="apple-mobile-web-app-capable" content="yes">

更改状态栏外观

您可以将默认状态栏的外观更改为黑色或黑色半透明。黑色半透明，状态栏浮动在全屏内容的顶部，而不是向下推。这使布局更高，但阻碍了顶部。这是所需的代码：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

有关状态栏外观的更多信息，请see apple-mobile-web-app-status-bar-style.

例如：

使用黑色半透明的屏幕截图

使用黑色的屏幕截图

Answer 4

来自Official documentation，

例如，要将背景颜色设置为橙色：

<meta name="theme-color" content="#db5945">

此外，Chrome会在提供时显示出漂亮的高分量图标。 Chrome for Android会选择您提供的最高分辨率图标，我们建议您提供192×192px的PNG文件。例如：

<link rel="icon" sizes="192x192" href="nice-highres.png">

如何更改Lollipop上最新Chrome版本的标题栏和地址栏的颜色？

4 个答案:

Safari特定样式