如何更改棒棒糖最新Android Chrome版本中的标题栏和地址栏的颜色?

还没有find关于这个主题的任何东西。 我真的很喜欢在“概览”中更改地址栏和标题颜色的function吗? 有没有简单的方法来做到这一点?

适用于Android的Chrome在这里输入图像说明

我认为你需要使用Android 5.0 Lollipop才能正常工作,Chrome的“ 合并标签页”和“应用程序”设置为“ 开”

一些search后find解决scheme。

您需要在包含name="theme-color" <head>中添加一个<meta>标签,并以HEX代码作为内容值。 例如:

 <meta name="theme-color" content="#999999" /> 

你实际上需要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"> 

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

将以下元属性添加到HEAD部分的HTML代码中

 <head> ... <meta name="theme-color" content="Your Hexa Decimal 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的样式

从这里的指导文件

隐藏Safari用户界面组件

将支持apple-mobile-web-app-meta的标记设置为yes以打开独立模式。 例如,以下HTML将使用独立模式显示Web内容。

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

更改状态栏的外观

您可以将默认状态栏的外观更改为黑色或半透明。 状态栏以黑色半透明的方式浮在全屏幕内容的顶部,而不是将其推下。 这给布局更多的高度,但阻碍顶部。 以下是所需的代码:

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

有关状态栏外观的更多信息, 请参阅apple-mobile-web-app-status-bar-style。

例如:

截图使用黑色半透明

截图使用黑色半透明

使用黑色截图

使用黑色截图

从官方文件中 ,

例如,要将背景颜色设置为橙色:

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

另外,Chrome会提供美丽的高分辨率图标。 Chrome浏览器select您提供的最高分辨率图标,我们build议您提供一个192×192像素的PNG文件。 例如:

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