為什麼我的全螢幕背景圖像在行動 Chrome 中跳轉以及如何修復它？

行動Chrome 中的背景圖像偏移問題

在響應式網頁設計中，通常使用可平滑調整大小和過渡的全螢幕背景圖像。然而，開發者經常會遇到這樣的問題：當 iOS Safari、Android 瀏覽器或 Android 上的 Chrome 中的網址列向下滾動時隱藏時，背景會突然跳轉。

問題原因

使用背景大小值為「cover」的固定高度背景 div 時會出現問題。隨著網址列縮小，背景div的高度發生變化，導致影像重新調整其大小和位置以覆蓋可用區域。

解決方案1：將#bg1和#bg2高度設定為100vh

嘗試將背景div 高度設定為100vh（視口高度）看起來很優雅方案，但iOS 有一個vh bug，導致此方法無法可靠運作。

解決方案2：使用Javascript 設定靜態高度

由於Javascript 確定視口大小不受URL 欄的影響，您可以使用Javascript 根據視口大小在背景div 上設定靜態高度。這不是一個理想的解決方案，但它可以有效地防止背景圖像調整大小：

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

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

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

附加說明

需要注意的是，此問題是由iOS 和Android 平台中調整網址列大小。這些瀏覽器中的最新變更可以使用捲動技巧防止在頁面載入時隱藏 URL 欄。

解決滾動間隙

上述腳本有效地防止了後台調整大小，但當用戶向下滾動時可能會導致明顯的間隙。要解決此問題，請在背景高度上添加 60 像素：

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

此修改將防止間隙，但可能會導致在存在 URL 欄時隱藏背景圖像的底部 60 像素。

以上是為什麼我的全螢幕背景圖像在行動 Chrome 中跳轉以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！