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

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

该网站在移动设备/平板电脑/桌面上具有全屏背景图片。这些图像使用两个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;
}

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

此问题是由于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”错误（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);
}

我发现Jason的答案对我而言并不奏效，而且我仍在进步。Javascript确保页面顶部没有空隙，但是每当地址栏消失/重新出现时，背景仍然在跳跃。因此，除了Javascript修复程序之外，我还适用transition: height 999999s于div。这会创建一个持续时间很长的过渡，以至于实际上冻结了元素。

我的网站标题上也有类似的问题。

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

这将最终在android chrome上带来快速的滚动体验，因为在隐藏了网址栏并将手指从屏幕上移开后，.header-container会重新缩放。

CSS解决方案：

添加以下两行将防止url栏隐藏并且仍然可以进行垂直滚动：

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

这个问题可以通过媒体查询和一些数学来解决。以下是针对肖像的解决方案：

@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，因为当网址栏消失时，后者会调整大小

• 我将“ max”添加到device-aspect-ratio中，以针对最流行的两种纵横比。它们不会那么精确，但是它们仅适用于少数用户，并且仍然非常接近正确的vh。

• 记住使用水平/垂直的媒体查询，因此要进行肖像化，您需要翻转数字

2）对于每个媒体查询，将您希望元素在vw中的垂直高度的任何百分比乘以纵横比的倒数。

• 由于您知道宽度以及宽度与高度的比率，因此只需将所需的百分比（在您的情况下为100％）乘以高度/宽度的比率即可。

3）您必须确定网址栏的高度，然后再减去该高度。我还没有找到确切的测量结果，但是我将9％的设备用于风景优美的移动设备中，效果似乎不错。

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

• 让您的网站对用户而言似乎有问题，

• 元素大小不正确，或

• 使用javascript进行一些基本样式设置，

缺点是某些设备可能与最流行的设备具有不同的网址栏高度或宽高比。但是，如果只有少数设备遭受几个像素的加/减，则使用此方法，对我来说，这比每个在刷卡时调整网站大小的人都好得多。

为了简化，我还创建了一个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%);
  }
}

这里的所有答案都使用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;
}

编辑：对不起，这不能直接用多个背景来回答您的特定问题。但是，这是搜索固定背景在手机上跳跃的问题时的第一个结果。

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

1）设置了高度的元素会在100vh每次视口大小更改时调整大小，包括那些由（不显示）URL栏引起的情况。

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

一种解决方案是使用AlexKempton的答案中的transition: 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启动，并开始手动管理高度。这样，页面加载时（甚至之后）就不会闪烁。

我当前使用的解决方案是检查userAgent打开$(document).ready的浏览器是否是有问题的浏览器之一。如果是，请按照下列步骤操作：

1. 将相关高度设置为当前视口高度，而不是“ 100％”
2. 存储当前视口水平值
3. 然后，在上$(window).resize，仅在新的水平视口尺寸与其初始值不同时更新相关的高度值
4. 存储新的水平和垂直值

（可选）您也可以测试仅当垂直调整大小超出地址栏的高度时才允许垂直调整大小。

哦，地址栏确实会影响$(window).height。请参阅：移动Webkit浏览器（chrome）地址栏更改$（window）.height（）; 使background-size：cover每次 JS“ Window” width-height vs“ screen” width-height 重新缩放？

我找到了一个不使用Javascript的简单解决方案：

transition: height 1000000s ease;
-webkit-transition: height 1000000s ease;
-moz-transition: height 1000000s ease;
-o-transition: height 1000000s ease;

这一切都是为了延迟运动，以至于令人难以置信的是它的缓慢运动使其不被察觉。

我的解决方案涉及一些JavaScript。将div保持在100％或100vh（这样可以避免div在初始页面加载时不出现）。然后，在页面加载时，抓住窗口高度并将其应用于相关元素。避免跳跃，因为现在您的div上具有静态高度。

var $hero = $('#hero-wrapper'),
    h     = window.innerHeight;

$hero.css('height', h);

我创建了一个使用VH单元的普通javascript解决方案。几乎在任何地方使用VH都会受滚动条最小化地址栏的影响。为了解决页面重绘时显示的问题，我在这里有了这个js，它将使用VH单位（如果您给它们提供class .vh-fix）来抓取您的所有元素，并为它们提供内联像素高度。本质上将它们冻结在我们想要的高度。您可以在旋转或更改视口大小时执行此操作，以保持响应速度。

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {
    el.style.height = el.clientHeight + 'px'
  }
}

这解决了我所有的用例，希望对您有所帮助。

这是解决此问题的解决方案，我直接在代码上添加了注释。我已经测试了此解决方案，并且工作正常。希望我们对每个有同样问题的人有用。

//remove height property from file css because we will set it to first run of page
//insert this snippet in a script after declarations of your scripts in your index

var setHeight = function() {    
  var h = $(window).height();   
  $('#bg1, #bg2').css('height', h);
};

setHeight(); // at first run of webpage we set css height with a fixed value

if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
      setHeight(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      setHeight(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $( window ).resize(function() {                           // so in this case we use resize to have
    setHeight();                                            // responsivity resisizing browser window
  }); 
};

这是我尝试过的所有方法中最好的解决方案（最简单）。

...这并不能保留地址栏的本机体验！

例如，您可以使用CSS将高度设置为100％，然后在加载文档时使用JavaScript将高度设置为以px为单位的窗口高度的0.9 *。

以jQuery为例：

$("#element").css("height", 0.9*$(window).height());

）

不幸的是，没有任何纯CSS的作品：P也算是minfull是vh和vw是在iPhone上车-使用百分比。

我用javascript设置width元素。在我设置了de vh之后。

html

<div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div>

的CSS

#gifimage {
    position: absolute;
    height: 70vh;
}

javascript

imageHeight = document.getElementById('gifimage').clientHeight;

// if (isMobile)       
document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px");

这对我有用。我不使用jQuery ect。因为我希望它尽快加载。

花了几个小时来了解此问题的所有细节并找出最佳实施方案。事实证明，截至2016年4月，只有iOS Chrome浏览器存在此问题。我尝试在Android Chrome和iOS Safari上运行-都没有此修复程序就可以了。因此，我正在使用的iOS Chrome浏览器修补程序是：

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div-with-background-image').css('height', screenHeight + 'px');
});

如果背景允许，则简单回答，为什么不将background-size：设置为仅通过媒体查询覆盖设备宽度的内容，并在：after位置旁边使用：fixed; 入侵这里。

IE：背景尺寸：901px；任何小于900像素的屏幕？虽然不完美或没有响应，但是当我使用抽象BG时，在小于480px的移动设备上对我来说很有吸引力。

我正在使用此解决方法：通过以下方法修复页面加载时bg1的高度：

var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;

然后将一个调整大小的事件侦听器附加到Window上，以执行此操作：如果调整大小后的高度差小于60px（大于网址栏高度），则不执行任何操作；如果大于60px，则将bg1的高度再次设置为其父级的高度！完整的代码：

window.addEventListener("resize", onResize, false);
var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;
var oldH = BG.parentElement.clientHeight;

function onResize() {
    if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){
      BG.style.height = BG.parentElement.clientHeight + 'px';
      oldH = BG.parentElement.clientHeight;
    }
}

PS：这个错误太令人讨厌了！

类似于@AlexKempton答案。（无法对不起发表评论）

我一直在使用较长的过渡延迟来防止元素调整大小。

例如：

transition: height 250ms 600s; /*10min delay*/

这样做的权衡是它阻止了元素大小的调整，包括设备旋转时的大小，但是，orientationchange如果出现问题，您可以使用一些JS来检测并重置高度。

对于那些想在Chrome移动浏览器转换时听到窗口的实际内部高度和垂直滚动的人，URL栏从显示状态变为隐藏状态，反之亦然，我发现的唯一解决方案是设置间隔函数，并且衡量window.innerHeight与先前值的差异。

这引入了以下代码：

var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);

我希望这会很方便。有谁知道更好的解决方案？

当遇到类似问题时，我想出的解决方案是设置window.innerHeight每次touchmove事件触发时元素的高度。

var lastHeight = '';

$(window).on('resize', function () {
    // remove height when normal resize event is fired and content redrawn
    if (lastHeight) {
        $('#bg1').height(lastHeight = '');
    }
}).on('touchmove', function () {
    // when window height changes adjust height of the div
    if (lastHeight != window.innerHeight) {
        $('#bg1').height(lastHeight = window.innerHeight);
    }
});

这使元素始终始终精确覆盖可用屏幕的100％，不多也不少。即使在地址栏隐藏或显示期间。

不过，遗憾的是我们不得不提出那种position: fixed应该在简单的地方起作用的补丁。

借助iOS中CSS自定义属性（变量）的支持，您可以使用JS设置这些属性，并仅在iOS上使用它们。

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

我的答案是给所有来这里的人（像我一样），以查找由隐藏地址裸露/浏览器界面引起的错误的答案。

隐藏的地址栏导致调整大小事件触发。但是与其他调整大小事件不同，例如切换到横向模式，这不会更改窗口的宽度。因此，我的解决方案是挂接到resize事件中，并检查宽度是否相同。

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});