html - Safari 15 中的过度滚动背景颜色(即视点上方/下方)

Question

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

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

Answer 1

这是一个New WebKit Feature在 macOS Monterey 和 Big Sur 以及 iPadOS 15 上的 Safari 15

WebKit now provides support for theme-color in HTML meta tags, and in Web Manifest. By specifying a theme-color, web developers can change the color of the status bar and overscroll area in Safari on iOS 15.

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

{
    "theme_color": "#0000ff"
}

从 index.html 链接:

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

请注意，如果未指定颜色，此功能将发挥神奇作用。要准确了解此功能的工作原理，您需要查看 WebKit 的源代码。

For sites that don`t provide a color, Safari will figure out a color to use. Sometimes Safari matches the background color of the web page. Other times, it matches the header background. Design for Safari