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

新手上路,请多包涵

尚未找到有关此主题的任何内容。我真的很喜欢在概览中更改地址栏颜色和标题颜色的功能吗?有什么简单的方法可以做到这一点?

安卓版 Chrome在此处输入图像描述 .

我认为您需要 Android 5.0 Lollipop 才能正常工作,并且 Chrome 的 Merge Tabs and Apps 设置为 On

原文由 Arpad Gabor 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 876
2 个回答

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

您需要在包含 name="theme-color"<head> 中添加一个 <meta> 标记,并将您的十六进制代码作为内容值。例如:

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

更新:

如果 android 设备启用了本机 dark-mode ,则此 meta 标签将被忽略。

Chrome for Android 不会在启用了本机 dark-mode 的设备上使用该颜色。

来源: https ://caniuse.com/#search=theme-color

原文由 Arpad Gabor 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

HEAD 部分的 HTML 代码中添加下面的 Meta 属性

<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 特定样式

这里的指南文件

隐藏 Safari 用户界面组件

将 apple-mobile-web-app-capable 元标记设置为 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。

例如:

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

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

使用黑色的屏幕截图

使用黑色的屏幕截图

原文由 Ravi Delixan 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题