为什么当地址栏隐藏时，我的全屏背景图片在移动 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中文网其他相关文章！