為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？

網址列上的背景圖片偏移在iOS/Android/Mobile Chrome 隱藏

問題

使用CSS 開發響應式網站時，包括完整的- 螢幕背景圖像在兩個div 之間旋轉和淡入淡出，出現意外行為：在iOS Safari、Android瀏覽器上向下捲動時，背景圖像會輕微跳躍，或 Android Chrome。這是由於網址列隱藏並因此調整背景 div 的大小而導致的，背景 div 的大小已固定並設定為 100% 高度。

解決方案

要解決此問題，存在兩種可能的解決方案:

1. 將#bg1 和#bg2 高度設定為100vh: 這個解決方案理論上很優雅，使用視口高度來設定合適的高度。但是，iOS 有一個 vh bug 影響了這個解決方案。
2. 使用 JavaScript 設定靜態高度：視口大小由 JavaScript 決定時不受網址列影響。因此，JavaScript 可以根據視窗大小設定背景 div 的靜態高度。由於其非純 CSS 性質以及頁面載入時輕微的圖片跳轉，這不是一個理想的解決方案，但考慮到 iOS 的 vh bug，它是可行的。

使用以下JavaScript 程式碼將調整背景動態高度：

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

其他注意事項

雖然上述解決方案有效地防止了背景大小調整，但它可能當使用者向下捲動時會產生明顯的間隙。此間隙是由於將背景高度與螢幕匹配減去 URL 欄高度而產生的。透過在高度上增加60px 可以解決這個問題，但這意味著當URL 欄存在時，背景圖像的底部60px 將不可見：

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

值得注意的是，這些調整大小iOS 和Android中的URL 欄因其對網站功能的影響而引起人們的注意。儘管它們的目的已被理解，但它們的行為可能會對基於 CSS 的設計帶來意想不到的挑戰。

以上是為什麼當網址列隱藏時，我的全螢幕背景圖片在行動 Chrome 上會跳轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！