使用CSS在Chrome Android上计算视口高度 [英] Calculating Viewport Height on Chrome Android with CSS

问题描述

所以我注意到，移动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（））; 
} 
 calcVH（）; 
 $（window）.on（'resize orientationchange'，function（）{
 calcVH（）; 
}）; 
  

上面的工作示例演示

我希望能够在没有javascript的情况下这样做，虽然如果有人有CSS替代他们知道作品。

解决方案

这是我所做的：

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选择器。如果您使用pure 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（）{
  

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




So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vh on an element doesn't work because when the address bar scrolls the viewport height changes.

I was actually able to find a question that had the same issue here on ios, but after investigating further I realized that this happens on all mobile Chrome browsers. When the address bar scrolls out of the viewport and then again when scrolls into the viewport, the viewport height changes.

This causes any element using vh to recalculate which makes the page jump. It's extremely annoying when using a background image because it causes the image to resize on scrolling.

Here's the code and an example

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

You'll only be able to see the issue when scrolling up and down using mobile chrome.

My question is, I would like to know is there any way around this or if not how to calculate full height on mobile chrome without causing the page to jump (css or js).

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

---

Update: So as far as using jquery here's what I came up with which seems to work pretty well:

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

Demo of working example above

I'd love to be able to do this without javascript though if someone has a CSS alternative that they know works.

解决方案

Here's what I went with:

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

Simply change #selector to whatever your css selector is. If you use the pure js version you need to use an ID unless you change .getElementByID to .getElementsByClassName.

I'm only aware of this being a problem in Mobile Chrome Android, but I'm guessing it's the same for Chrome iOS as well. You could easily add a mobile detect option if you wanted so this only runs when you need it to. Personally I use Detectizr which works well, but to be honest, since it's pretty lightweight as it is, adding something like this is probably not worth it unless you're already using it.

Hopefully this gets fixed soon so a javascript solution isn't necessary. Also, I tried adding the resize event in case the browser width resizes, but after seeing this question I removed it from my answer. If you want to try using those just change the above to:

JQUERY

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

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

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

这篇关于使用CSS在Chrome Android上计算视口高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！