當我的Progressive Web應用程序從iPhone的主屏幕啟動時，我正試圖擺脫令人討厭的應用程序級滾動行為。當用戶在應用程序上向上推或向下拉時，會顯示PWA的背景主題顏色。我當然想要更多的& quot類app & quot；感受它不這樣做的地方。這似乎只發生在iPhone上的Safari上Android上的Chrome不會這樣。下面是我嘗試過的相關CSS。 在web清單中，我嘗試了& quot顯示& quot:& quot獨立& quot和& quot顯示& quot:& quot全屏& quot。我在YouTube上做了一個13秒的視頻，關于這個問題: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元素的顏色。

web視圖從 頁面內容，使用& lthtml & gt和 & ltbody & gt帶有web視圖背景色的元素。超越 默認顏色，將該屬性設置為新顏色。

所以對比一下Safari和其他瀏覽器的設計:Safari頂部沒有地址欄，它使用頁面的顏色來填充頂部的安全區域，而Chrome沒有這個問題。它的頂部有一個固定的地址欄。

如果我們在自己的應用程序中實現自己的WebView，我們可以將其覆蓋為任何我們想要的顏色。但是要在Safari中去掉，除非你把機身背景色設置成透明，否則沒辦法。