小编典典

地址栏隐藏iOS / Android / Chrome浏览器时背景图片会跳转

html

我目前正在使用Twitter Bootstrap开发一个响应式网站。

该网站在移动设备/平板电脑/桌面上具有全屏背景图片。这些图像使用两个div旋转并逐渐淡入。

除了一个问题,它几乎是完美的。使用iOS
Safari,Android浏览器或Android上的Chrome,当用户向下滚动页面并导致地址栏隐藏时,背景会略微跳动。

在移动设备上访问它并向下滚动,您应该会看到图像调整大小/移动。

我用于后台DIV的代码如下:

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

欢迎所有建议-这已经让我有一段时间了!


阅读 318

收藏
2020-05-10

共1个答案

小编典典

此问题是由于URL栏缩小/滑出并更改#bg1和#bg2
div的大小而引起的,因为它们是100%高度且已“固定”。由于背景图像设置为“覆盖”,因此随着包含区域的增大,它将调整图像的大小/位置。

根据站点的响应性质,背景必须扩展。我接受两种可能的解决方案:

1)将#bg1,#bg2高度设置为100vh。从理论上讲,这是一个优雅的解决方案。但是,iOS有一个vh错误。我尝试使用最大高度来防止出现此问题,但问题仍然存在。

2)当视口大小由Javascript确定时,不受URL栏的影响。因此,可以使用Javascript根据视口大小在#bg1和#bg2上设置静态高度。这不是最佳解决方案,因为它不是纯CSS,并且页面加载时图像略有跳跃。但是,考虑到iOS的“
vh”错误(这在iOS 7中似乎未修复),这是我看到的唯一可行的解​​决方案。

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

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

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

附带说明一下,我在iOS和Android中看到了这些重新设置URL栏大小的问题。我知道目的,但他们确实需要考虑带给网站的奇怪功能和破坏。最新变化是,您不再可以使用滚动技巧在页面加载时“隐藏”
iOS或Chrome上的URL栏。

编辑:虽然上面的脚本可以完美地防止后台调整大小,但是当用户向下滚动时,会导致明显的间隙。这是因为它将背景大小保持为屏幕高度减去URL栏的100%。如瑞士人所建议,如果将高度增加60像素,此问题将消失。这确实意味着当出现URL栏时,我们看不到背景图像的底部60像素,但是它防止用户看到间隙。

function resizeBackground() {
    bg.height( $(window).height() + 60);
}
2020-05-10