logo标签列表

渐进式Web应用在iPhone/Safari上的应用级滚动行为显示主题背景。

cssiphonescrolluiscrollviewprogressive-web-apps
7
我正在尝试消除我的渐进式Web应用从iPhone主屏幕启动时令人讨厌的应用级滚动行为。当用户向上或向下推动应用程序时，PWA的背景主题颜色会显示出来。当然，我希望它更像一个“应用程序”，不会这样做。这似乎只发生在iPhone上的Safari上 - Android上的Chrome不会表现出这种行为。我尝试了相关的CSS，如下所示。在Web清单中，我尝试过“display”：“standalone”和“display”：“fullscreen”。我在这里制作了一个长达13秒的YouTube视频，展示了问题：https://youtube.com/shorts/6uP7VxZ1mdE。

enter image description here

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;
 }
嗨，River，你能提供一个最小可行示例吗？ - kakaiikaka
我不确定我理解了。为什么不使用 overscroll-behavior: none;？ - borisdiakur
1个回答
2

在这里分享我的理解：

首先让我们找出这种行为的名称。

iOS上的Safari是由WKWebView编写的（Chrome目前也使用它），而WKWebView具有此属性：underPageBackgroundColor。请参见文档链接：here。它将尝试将滚动视图的背景颜色设置为您的html body元素的颜色。

Web视图从页面内容中派生此属性的默认值，使用<html>和<body>元素的背景颜色与Web视图的背景颜色。要覆盖默认颜色，请将此属性设置为新颜色。

比较Safari和其他浏览器的设计：Safari在顶部没有地址栏，并且使用页面颜色填充顶部的安全区域，而Chrome没有这个问题。它在顶部有一个固定的地址栏。 如果我们在自己的应用程序中实现自己的WebView，我们可以将其覆盖为任何颜色。但是要在Safari中删除它，除非您将body的背景颜色设置为透明，否则没有办法。 enter image description here
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接