当地址栏隐藏iOS/Android/Mobile Chrome时,背景图片会跳转

Question

我目前正在使用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;
}

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

Answer 1

这个问题是由URL栏缩小/滑动并改变#bg1和#bg2 div的大小引起的,因为它们是100%高度和"固定".由于背景图像设置为"覆盖",因此当包含区域较大时,它将调整图像大小/位置.

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

1)将#bg1,#bg2高度设置为100vh.理论上,这是一个优雅的解决方案.但是,iOS有一个vh bug(http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/).我尝试使用max-height来防止这个问题,但它仍然存在.

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上的页面加载网址栏.

编辑:虽然上面的脚本完美地用于防止背景调整大小,但当用户向下滚动时会导致明显的差距.这是因为它将背景大小保持为屏幕高度的100%减去URL栏.如果我们向高度添加60px,正如瑞士所说,这个问题就消失了.这确实意味着当URL栏存在时我们无法看到背景图像的底部60px,但它可以防止用户看到间隙.

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

Answer 2

我发现杰森的回答并不适合我,我还在跳跃.Javascript确保页面顶部没有间隙,但只要地址栏消失/重新出现,背景仍然会跳跃.因此,除了Javascript修复,我还应用于transition: height 999999sdiv.这会创建一个持续时间过长的过渡,以至于它实际上冻结了元素.

Answer 3

我的网站标题上有类似的问题.

html, body {
    height:100%;
}
.header {
    height:100%;
}

这将最终导致Android chrome上的滚动滚动体验,因为.header-container将在url-bar隐藏并且手指从屏幕移除后重新缩放.

CSS-解决方案:

添加以下两行将阻止url-bar隐藏和垂直滚动仍然可能:

html {
    overflow: hidden;
}
body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

Answer 4

问题可以通过媒体查询和一些数学来解决.这是一个肖像方向的解决方案:

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

由于当网址栏消失时,vh会发生变化,因此您需要以另一种方式确定高度.值得庆幸的是,视口的宽度是恒定的,移动设备只有几个不同的宽高比; 如果你可以确定宽度和宽高比,一点数学将给你视口高度完全与vh 应该工作.这是过程

1)为要定位的宽高比创建一系列媒体查询.

• 使用device-aspect-ratio而不是aspect-ratio,因为后者会在url bar消失时调整大小

• 我将"max"添加到设备宽高比,以定位最流行之间恰好跟随的任何宽高比.它不会那么精确,但它们只适用于少数用户,并且仍然非常接近正确的vh.

• 记住使用水平/垂直的媒体查询,所以对于肖像你需要翻转数字

2)对于每个媒体查询,乘以您想要的元素在vw中的任何百分比,与宽高比相反.

• 由于您知道宽度和宽度与高度的比率,因此您只需将所需的百分比(在您的情况下为100%)乘以高度/宽度的比率.

3)你必须确定url bar高度,然后从高度减去它.我还没有找到确切的测量结果,但我在景观中使用了9%的移动设备并且看起来效果相当不错.

这不是一个非常优雅的解决方案,但其他选项也不是很好,考虑到它们是:

• 让您的网站看起来对用户有害,

• 具有不正确尺寸的元素,或

• 使用javascript进行一些基本样式,

缺点是一些设备可能具有与最流行的不同的url条高度或纵横比.但是,使用这种方法,如果只有少数设备遭受几个像素的加/减,这对我来说似乎比刷网时调整网站的每个人都好.

为了方便起见,我还创建了一个SASS mixin:

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

Answer 5

这里的所有答案都是使用window高度,这受URL栏的影响.大家都忘了screen身高吗？

这是我的jQuery解决方案:

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

添加.css()零件是将不可避免的顶部对齐绝对定位元素更改为底部对齐,因此根本没有跳跃.虽然,我想没有理由不直接将它添加到普通的CSS中.

我们需要用户代理嗅探器,因为桌面上的屏幕高度没有帮助.

此外,这是假设#background是填充窗口的固定位置元素.

对于JavaScript纯粹主义者(警告 - 未经测试):

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

编辑:很抱歉,这不能直接回答您有多个背景的具体问题.但这是搜索固定背景在移动设备上跳跃的问题时的第一个结果之一.

Answer 6

当我试图创建一个覆盖整个视口的入口屏幕时,我也遇到了这个问题.不幸的是,接受的答案不再适用.

1)高度设置为100vh每次视口大小更改时调整大小的元素,包括由(dis)出现的URL栏引起的情况.

2)$(window).height()返回值也受URL栏大小的影响.

一种解决方案是使用AlexKemptontransition: height 999999s在答案中建议的"冻结"元素.缺点是这有效地禁用了对所有视口大小变化的适应,包括由屏幕旋转引起的变化.

所以我的解决方案是使用JavaScript手动管理视口更改.这使我可以忽略可能由URL栏引起的小变化,并仅对大的变化做出反应.

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);

编辑:我实际上使用这种技术height: 100vh.页面从一开始就正确呈现,然后javascript启动并开始手动管理高度.这样,在页面加载时(甚至之后),根本没有闪烁.

Answer 7

目前我使用的解决方案是检查userAgent上$(document).ready,看它是否是有问题的浏览器之一.如果是,请按照下列步骤操作:

1. 将相关高度设置为当前视口高度而不是"100%"
2. 存储当前视口水平值
3. 然后,$(window).resize如果新的水平视口尺寸与其初始值不同,则仅更新相关的高度值
4. 存储新的水平和垂直值

或者,您也可以仅在超出地址栏高度时测试允许垂直调整大小.

哦,地址栏确实会影响$(window).height.请参阅:Mobile Webkit浏览器(chrome)地址栏更改$(window).height(); 制作背景尺寸:每次封面重新缩放 JS"窗口"宽度 - 高度与"屏幕"宽度 - 高度？