使用 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;
    }

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

我的问题是，我想知道有什么办法可以解决这个问题，或者如果没有的话如何计算移动chrome上的完整高度而不导致页面跳转（css或js）。

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

---

更新：所以就使用jquery而言，这是我想出的，它似乎工作得很好：

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

上面工作示例的演示

如果有人有他们知道可行的 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版本，则需要使用ID，除非您将

.getElementByID

更改为

.getElementsByClassName

。

我只知道这是 Android 移动 Chrome 中的一个问题，但我猜 iOS Chrome 也有同样的问题。如果您愿意，您可以轻松添加“移动检测”选项，这样它仅在您需要时运行。就我个人而言，我使用 Detectizr ，它效果很好，但说实话，因为它本身相当轻量级，所以添加这样的东西可能不值得，除非你已经在使用它。 希望这个问题能尽快得到解决，这样就不需要 JavaScript 解决方案了。另外，我尝试添加调整大小事件，以防浏览器宽度调整大小，但在看到这个问题后，我将其从答案中删除了。如果您想尝试使用这些，只需将上面的内容更改为：

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

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

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 导航栏或任何会干扰您的输出或您想看到的内容

我真的希望这能帮助别人！

也许这只是做得更伟大的模板。

Answer 3

dvh

单位可供使用：

#selector {
   height: 100dvh;
}