Safari 15 中滚动背景颜色（即上方/下方视点）

Question

最近（版本 15？）macOS 版 Safari 似乎改变了选择视口外背景颜色的方式，即仅当滚动到视口边框上方/下方时才可见的页面部分的颜色。我发现这种颜色是由<meta>带有名称的标签"theme-color"（如果存在）确定的。theme-color但是，如果元标记不存在，我不明白页面的哪一部分控制此颜色。具体来说，我不明白为什么此页面上的颜色是蓝色的。

我使用 Safari 版本 15.4 (17613.1.17.1.13)、macOS Monterey (12.3.1)。

Answer 1

这是macOS Monterey 和 Big Sur 以及 iPadOS 15 上 Safari 15 中的新 WebKit 功能

WebKit 现在在 HTML 元标记和 Web Manifest 中提供对主题颜色的支持。通过指定主题颜色，Web 开发人员可以更改 iOS 15 上 Safari 中状态栏和滚动区域的颜色。

具体来说，在提到的网页上，它在manifest.webmanifest文件中指定

{
    "theme_color": "#0000ff"
}

链接自index.html：

<link rel="manifest" href="manifest.webmanifest">

请注意，如果未指定颜色，此功能就像魔术一样起作用。要确切了解此功能的工作原理，您需要查看 WebKit 的源代码。

对于不提供颜色的网站，Safari 会找出要使用的颜色。有时 Safari 会与网页的背景颜色相匹配。其他时候，它与标题背景匹配。专为 Safari 设计