Question

所以我注意到移动Chrome会将地址栏计算到视口高度。因此，在元素上使用height: 100vh不起作用，因为当地址栏滚动时，视口高度会发生变化。

我实际上能够在ios上遇到同样问题的find a question，但经过进一步调查后，我意识到这种情况发生在所有移动Chrome浏览器上。当地址栏滚出视口，然后再滚动到视口时，视口高度会更改。

这会导致使用vh的任何元素重新计算，这会使页面跳转。使用背景图像时非常烦人，因为它会导致图像在滚动时调整大小。

这是代码和an example

   .jumbotron {
        background-image: url(http://example.com/image.png);
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        height: 100vh;
    }

使用移动设备上下滚动时，您才能看到问题。

我的问题是，我想知道有没有办法解决这个问题，或者如果不是如何计算移动浏览器的全高，而不会导致页面跳转（css或js）。

http://s.codepen.io/bootstrapped/debug/qadPkz

更新：至于在这里使用jquery，我想出的效果相当不错：

function calcVH() {
    $('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
  calcVH();
});

Demo of working example above

我希望能够在没有javascript的情况下做到这一点，但是如果某人有一个他们知道可行的CSS替代品。

Answer 1

这就是我的目的：

<强> HTML

<div id="selector"></div>

<强> CSS

#selector {
   height: 100vh;
}

<强> JQUERY

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange', function() {
    calcVH();
  });
})(jQuery);

PURE JS（NO JQUERY）

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);

只需将#selector更改为您的css选择器即可。如果您使用纯js版本，则需要使用ID，除非您将.getElementByID更改为.getElementsByClassName。

我只知道这是移动Chrome Android中的一个问题，但我猜测它对Chrome iOS来说也是如此。如果您愿意，可以轻松添加mobile detect选项，只有在需要时才会运行。我个人使用Detectizr效果很好，但说实话，因为它非常轻巧，添加这样的东西可能不值得，除非你已经在使用它。

希望很快就能解决这个问题，因此javascript解决方案是不必要的。此外，我尝试添加resize事件，以防浏览器宽度调整大小，但在看到这个问题后，我从我的答案中删除了它。如果您想尝试使用它们，只需将上述内容更改为：

<强> JQUERY

function calcVH() {
    $('#selector').innerHeight( $(this).innerHeight() );
}
(function($) { 
  calcVH();
  $(window).on('orientationchange resize', function() {
    calcVH();
  });
})(jQuery);

$(window).on('resize orientationchange', function() {

PURE JS（NO JQUERY）

function calcVH() {
  var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
window.addEventListener('resize', calcVH, true);

Answer 2

我尝试了所有的建议......但没有什么对我有用。使用Chrome或IOS。

但是......我有一个想法！

1。您可以将标准条目留在头部

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2。在Foot中写一个JS（确保jQuery知道你的元素），例如

<script type="text/javascript" charset="utf-8">
  (function() {
    function size() {
      // you can change here what you prefer
      if (/android|webos|iphone|ipad|ipod|blackberry|nokia|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
        var theminheight = Math.min(document.documentElement.clientHeight, window.screen.height, window.innerHeight);
        //now apply height ... if needed...add html & body ... i need and i use it
        $('html body #yourelementofchoise').css('height', theminheight);
      }
    }
    window.addEventListener('resize orientationchange', function() {
      size();
    }, false);
    size();
  }());
</script>

3。不再使用chrome或任何会影响您的输出或您想看到的内容的导航栏

我真的希望这会对某人有所帮助！

也许这只是一个做得更多的模板。

使用CSS在Chrome Android上计算视口高度

2 个答案:

这就是我的目的：