地址栏隐藏iOS/Android/Mobile Chrome时背景图像跳转

Question

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

该网站有一个全屏背景图像的移动/平板/台式机。这些图像通过使用两个div旋转和淡化通过每一个。

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

网址在这里:http://lt2.daveClarke.me/

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

我用于后台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;
}

欢迎所有的建议-这已经使我的头有一段时间了！！

Answer 1

这个问题是由URL栏收缩/滑出的方式和改变#BG1和#BG2 div的大小引起的，因为它们是100%高度和“固定”的。由于背景图像被设置为“覆盖”，它将调整图像大小/位置，因为包含的区域更大。

基于站点的响应特性，背景必须缩放。我认为有两种可能的解决办法：

1）将#BG1,#BG2高度设置为100vh。理论上，这是一个很好的解决方案。但是，iOS有一个vh错误(http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/)。我尝试使用最大高度来防止该问题，但仍然存在。

2）视区大小，当由Javascript确定时，不受URL栏的影响。因此，可以使用Javascript根据视区大小在#bg1和#bg2上设置静态高度。这不是最好的解决方案，因为它不是纯粹的CSS，页面加载时会有轻微的图像跳转。但是，考虑到iOS的“VH”bug（iOS 7中似乎没有修复），这是我看到的唯一可行的解决方案。

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

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

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

顺便说一句，我在iOS和Android中看到了很多调整URL栏大小的问题。我理解其目的，但他们真的需要考虑通过奇怪的功能和他们给网站带来的破坏。最新的变化是，你不能再在iOS或Chrome上使用滚动技巧“隐藏”页面加载时的URL栏。

编辑：虽然上面的脚本可以很好地保持背景的大小，但当用户向下滚动时，它会造成一个明显的差距。这是因为它将背景大小保持为屏幕高度的100%减去URL栏。如果我们像瑞士人建议的那样，在高度上加上60px，这个问题就不复存在了。这确实意味着当URL栏存在时，我们无法看到背景图像的底部60px，但它阻止了用户看到空隙。

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