移动版Chrome顶部栏中的颜色

Mic*_*ael 5 html css google-chrome

我想知道类似的网站如何更改chrome顶部栏的颜色。

这是截图

在顶部(顶部),您可以看到多视图导航颜色(黑色)也被设置为chrome导航的颜色(链接位于此处)。css是如何制作的?提前致谢!

A-3*_*312 6

从 Lollipop 上的 Android 版 Chrome 版本 39 开始,您现在可以使用theme-color元标记来设置工具栏颜色——这意味着不再有西雅图灰色的工具栏!语法很简单:一元标记添加到您的网页<head>name="theme-color",并设置content为任何有效的CSS颜色。

显示主题颜色的手机屏幕截图

例如,要将背景设置为您喜欢的颜色或 HTML5Rocks 橙色:

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

此外,Chrome 会在提供时显示漂亮的高分辨率图标。Android 版 Chrome 会选择您提供的分辨率最高的图标,我们建议您提供 192×192 像素的 PNG 文件。例如:

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

在 HTML5Rocks 以及Web Fundamentals 站点上查看主题颜色,并确保查看添加到主屏幕文档以了解更多使您的站点脱颖而出的方法。

来源: https : //developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android