iPhone / Safari 上的渐进式 Web 应用程序应用级滚动行为显示主题背景
Riv*_*ver 7 css iphone scroll uiscrollview progressive-web-apps
当我的渐进式网络应用程序从 iPhone 主屏幕启动时，我试图摆脱烦人的应用程序级滚动行为。当用户向上或向下拉应用程序时，会显示 PWA 的背景主题颜色。当然，我想要一种更像“应用程序”的感觉，但它不这样做。这似乎只发生在 iPhone 上的 Safari 上 - Android 上的 Chrome 不会出现这种情况。我尝试过的相关CSS如下。在网络清单中，我尝试了“display”：“standalone”和“display”：“fullscreen”。我在这里制作了一个关于该问题的 13 秒 YouTube 视频：https://youtube.com/shorts/6uP7VxZ1mdE
html, body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
overscroll-behavior-y: contain;
overscroll-behavior-x: contain;
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
这里简单分享一下我的理解：
我们首先来了解一下这种行为叫什么。
iOS 上的 Safari 是由 WKWebView 编写的（Chrome 也使用它，至少目前如此），并且 WKWebView 有这个属性：underPageBackgroundColor。请参阅文档链接：此处。它会尝试将滚动视图的背景颜色设置为 html body 元素的颜色。
<html>Web 视图使用和<body>元素的背景颜色以及 Web 视图的背景颜色，从页面内容中派生此属性的默认值。要覆盖默认颜色，请将此属性设置为新颜色。
所以对比一下Safari和其他浏览器的设计：Safari顶部没有地址栏，它使用页面的颜色来填充顶部的安全区域，而Chrome则没有这个问题。它的顶部有一个固定的地址栏。
如果我们在自己的应用程序中实现自己的 WebView，我们可以将其覆盖为我们想要的任何颜色。但要在Safari中删除它，没有办法，除非将body的背景色设置为透明。
| 归档时间： |
|
| 查看次数： |
735 次 |
| 最近记录： |