ChatGPT解决这个技术问题 Extra ChatGPT

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

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

https://i.stack.imgur.com/6iShFm.png

我认为您需要 Android 5.0 Lollipop 才能正常工作,并且 Chrome 的合并选项卡和应用程序设置为打开。

自 2016 年 1 月起,不再需要合并选项卡选项才能使其正常工作(在 Lollipop 中)。
现在奇巧也是这样。。
@Skuld 您需要合并选项卡才能在“最近的应用程序”视图中查看颜色,但即使您禁用了“合并选项卡和应用程序”,在 Chrome 中查看网站时仍然可以看到颜色。但我希望他们有一天能修复它,以便 Chrome 中的标签列表(在“合并标签和应用程序”被禁用时显示)也将显示主题颜色而不是暗灰色。
@ADTC 你是说当你去切换标签时它会失去颜色吗?如果是这样,那么是的,它并不理想,但也不是什么大不了的事,因为当您单击选项卡时它会恢复颜色。最重要的是网站在查看时具有正确的颜色:)
@Skuld,“合并选项卡和应用程序”已关闭,您在切换选项卡时会获得 this view (link)。在此视图中,所有选项卡都是灰色的。如果主题颜色保留在此视图中,那就太好了。类似于当“合并选项卡和应用程序”打开并打开应用程序切换器时“类应用程序选项卡”具有主题颜色的方式。 (PS:我个人讨厌合并,因为我有很多标签,然后我也有很多应用程序。我想让它们分开,否则我会发疯的 >.< )

R
Raja Anbazhagan

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

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

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

更新:

如果 android 设备启用了原生 dark-mode,则忽略此 meta 标记。

Android 版 Chrome 不会在启用了原生暗模式的设备上使用该颜色。

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


谢谢。还可以查看 html5rocks 了解更多信息:updates.html5rocks.com/2014/11/…
Chrome中是否有任何设置可以禁用此功能?我无法忍受彩色地址栏。我只想要默认颜色。
@James-这可能不是您喜欢的解决方法,但是您可以通过关闭“将标签与应用合并”设置来停止颜色更改。
真的吗?我正在使用 Marshmallow,关闭了“使用应用程序合并标签”设置,但地址栏仍然是彩色的。也许他们“修复了错误”。
不一定需要是十六进制颜色,任何有效的 CSS 颜色都可以。
i
isherwood

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

那么加载栏呢?正如我所看到的使顶部栏变暗并且加载栏变白的网站,但我找不到分析代码的片段?
注意:根据 Apple's dev notes:“除非您首先按照 apple-apple-mobile-web-app-capable 中的说明指定全屏模式,否则此元标记无效。”
@YanFoto 这实际上是非常有用的信息。如何做到这一点?
iOS apple-mobile-web-app-status-bar-style 属性仅支持 blackblack-translucent or default` - 您不能使用自定义颜色。
如果您使用 black-translucent,它将使顶部栏透明并带有白色文本,这可能是您所追求的
N
Ninjakannon

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

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

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

例子

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

在下图中,我刚刚提到了 Chrome 如何获取您的主题颜色属性

https://i.stack.imgur.com/OMX5g.png

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-capable 元标记设置为 yes 以打开独立模式。例如,以下 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.

例如:

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

https://i.stack.imgur.com/hWVnD.png

使用黑色的屏幕截图

https://i.stack.imgur.com/q2nsx.png


D
Deval Khandelwal

Official documentation

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

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

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

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

除了添加不相关的信息外,这与原始答案相同
@igorsantos07 我只是想添加官方文档的链接。而已
我认为文档链接正是所选答案中缺少的内容。当我最终来到这里时,这就是我在谷歌上搜索的内容。谢谢你。
这是多余的