使用 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。

我的问题是，我想知道有没有办法解决这个问题，如果没有，如何计算移动设备上的全高 chrome 而不会导致页面跳转（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);

纯 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.

我只知道这是移动 Chrome Android 中的一个问题，但我猜 Chrome iOS 也是如此。您可以轻松添加一个效果很好的 mobile detect option if you wanted so this only runs when you need it to. Personally I use 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

我尝试了每一个建议...但对我来说没有任何效果。使用 Chrome 或 IOS.

但是后来...我有了一个主意！

1.你可以把标准词条留在head

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

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

也许这只是一个模板，可以做得更好。

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

Calculating Viewport Height on Chrome Android with CSS

css

mobile

google-chrome

background-image

viewport

这是我的选择：