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

Question

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

我实际上可以find a question 在 ios 上遇到同样的问题，但在进一步调查后，我意识到这发生在所有移动 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;
    }

您只能在使用移动版 chrome 上下滚动时看到该问题。

我的问题是，我想知道有没有办法解决这个问题，或者如果没有，如何在不导致页面跳转（css 或 js）的情况下计算移动 chrome 上的全高。 p>

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

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

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);

纯 JS（无 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版本，除非将.getElementByID改为.getElementsByClassName，否则需要使用ID。

我只知道这是移动 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() {

纯 JS（无 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. 在网站的脚下写一个 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 导航栏或任何会干扰您的输出或您想看到的东西

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

也许这只是一个更大的模板。