为什么我的全屏背景图像在移动 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中文网其他相关文章！