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

Question

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

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

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

这是代码和示例

   .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();
});

上面的工作示例演示

我希望能够在没有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.如果您愿意,可以轻松添加移动检测选项,只有在您需要时才会运行.我个人使用的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);