為什麼我的全螢幕背景影像在行動 Chrome 上出現抖動，如何修復？

行動Chrome 上的背景影像抖動

在開發具有全螢幕背景影像的響應式網站，可在行動裝置、平板電腦和平板電腦之間切換桌面上，觀察到iOS/Android 瀏覽器或Chrome上網址列隱藏時背景會輕微跳躍Android.

問題源自於背景圖片的 css 屬性，其中包括「固定」和「覆蓋」設定。當網址列消失時，背景 div 的高度會發生變化，因為它設定為 100% 高度。這反過來會影響背景圖像，導致其調整其大小和位置以適應新的容器大小。

為了解決這個問題，提出了兩種解決方案：

解決方案1：使用CSS vh 單位（不建議）

將背景div 的高度設定為100vh 可以保持所需的行為；然而，iOS 中存在一個已知的vh錯誤，該錯誤會導致視口單位測量不一致。嘗試使用 max-height 或其他解決方法來緩解此問題均不成功。

解決方案 2：使用 Javascript 根據視窗大小設定高度

Javascript 提供了更可靠的方法，因為它不受 URL 欄大小調整的影響。透過確定視窗大小並相應地設定背景 div 的高度，無論網址列的可見性如何，圖像都保持靜態。

這是Javascript 腳本：

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

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

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

其他調整：

雖然Javascript 腳本解決了背景調整大小問題，但可能會出現明顯的間隙向下滾動時。這可以透過在背景高度計算中添加一個小偏移來解決，有效隱藏潛在的間隙。

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

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