即使手機瀏覽器改變了滾動的高度，如何填充網站的背景？

我有一個網站，我試圖設計。我已經用背景填充了100％的屏幕高度。在計算機上，這種方式非常完美，但在移動設備上，它只佔用加載時可用的網頁空間的100％，其中包括位於頂部的browswer的URL欄。當您向下滾動時，網址欄會消失，從而在網站背景底部留下間隙。即使手機瀏覽器改變了滾動的高度，如何填充網站的背景？

該網站是一個單一的網頁網站。加載的「主頁」/初始視圖淡入背景圖像。我希望實際的內容在加載時剛剛離開屏幕，因此讓背景圖片充滿屏幕高度的100％非常重要。

我該如何解決這個問題？

下面是我如何填寫有問題的網站的背景和截圖。

我已經使用下面的CSS代碼填充了網站的背景。

html{ 
    background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 100%; 
    opacity: 1; 
}

Website with mobile browser URL bar

Website without mobile browser URL bar

來源

2017-02-24 Bobby

這防止滾動越過html元件，並允許body在移動設備上的過滾動期間保持其位置，因此，即使該設備支持過滾動，當body移動時，html被鎖定到所需的顏色或圖像。

html { 
    overflow: hidden; 
    height: 100%; 
} 

body { 
    height: 100%; 
    overflow: auto; 
}

確保包括這個meta標籤，如果你已經沒有

<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2017-02-24 02:46:19

我發現，這並不爲我工作。它不能修復背景圖像底部的空白。溢出控制鎖定了我的網頁的內容，即使html設置爲隱藏並且body設置爲auto。 – Bobby

即使手機瀏覽器改變了滾動的高度，如何填充網站的背景？

回答

相關問題