如何在 Safari 15 中控制网站着色答案

【问题标题】：How to control website tinting in Safari 15如何在 Safari 15 中控制网站着色
【发布时间】：2021-11-15 22:07:12
【问题描述】：

在 Safari 15 中，发布了一项新功能，该功能将地址栏和标签栏着色以匹配当前网站标题的颜色。

我注意到这个新功能不适用于我之前创建的任何网站。这让我想知道。这个网站着色功能究竟是如何工作的？我们可以使用CSS 或HTML 和CSS 的组合来控制条的颜色吗？

【问题讨论】：

标签： html css safari

【解决方案1】：

您可以在https://developer.apple.com/safari/ 了解如何操作。

另外，我只想指出某些颜色是被禁止的，这意味着它们不起作用。 Learn More

【讨论】：

【解决方案2】：

在网上看了一会，发现可以在你的HTML中使用下面的<meta>标签，所以设置地址栏的颜色：

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ffffff">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#ffffff">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">

Source

所以要在 Safari 中获取颜色，apple-mobile-web-app-status-bar-style 可能会起作用。

（我没有 Safari，所以我无法自己测试。我认为这会起作用）

【讨论】：

确实有效！似乎theme-color 元标记还包括 MacO 上的 Safari。非常感谢！