相关疑难解决方法(0)

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

该网站在移动设备/平板电脑/台式机上提供全屏背景图像.这些图像使用两个div旋转并淡入每个图像.

除了一个问题,它几乎是完美的.在Android上使用iOS Safari,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;
}

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

我花了很多时间尝试jquery/javscript"修复"来实现这一点.自上次更新Chrome Mobile for IOS以来,浏览器的地址栏表现不同.我相信你们都知道我在说什么:你向下滚动你的页面,栏子隐藏起来,但是一旦你向上滚动,就会出现.是的,这是一个很好的用户体验,我可以说.

问题是我的网络应用程序(标题)上面有固定元素,每次向上滚动时,地址栏都会覆盖我的固定元素.

我查找了其他网络应用程序(twitter,gmail),他们似乎找到了避免这种情况的方法.我想读一下你如何实现它的想法.没有必要告诉我不要使用固定元素.

所以我的问题是:有没有办法避免这种情况？你对这种情况有什么看法？

例如:https://mobile.twitter.com/EmWatson(最好在iphone上看到)

仅供参考:我使用Jquery移动框架作为我的网络应用程序.

谢谢.

这个CSS让我的背景在iOS中填充100%的屏幕高度但是有一个小问题 - 当你向下滚动时,最初是空白区域,然后当你松开手指并停止滚动背景图像时"调整"并填充100再次屏幕高度的百分比.如果您是第一次继续滚动,则问题不会在同一页面上重新出现.有人可以帮忙吗？谢谢

#background {
  background: url(../img/background.jpg) center repeat-x;
  position: fixed;
  background-size: auto 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1
}