如何更改棒棒糖最新Android Chrome版本中的标题栏和地址栏的颜色?
还没有find关于这个主题的任何东西。 我真的很喜欢在“概览”中更改地址栏和标题颜色的function吗? 有没有简单的方法来做到这一点?
。
我认为你需要使用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">