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

Question

在 Safari 15 中，发布了一项新功能，可对地址栏和标签栏进行着色以匹配当前网站 header 的颜色。

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

Answer 1

上网查了一下，发现可以在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，所以我无法自己测试。我认为这可行）

Answer 2

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

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

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

How to control website tinting in Safari 15

html

css

safari