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

问题描述

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

我实际上能够find a question 在 ios 上有同样的问题，但经过进一步调查后，我意识到这发生在所有移动 Chrome 浏览器上.当地址栏滚动出视口然后再次滚动到视口时，视口高度会发生变化.

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

这是代码和示例

 .jumbotron {背景图片:网址(http://example.com/image.png)；背景尺寸:封面；背景位置:顶部；背景重复:不重复；高度:100vh；}

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

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

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

<小时>

更新:就使用 jquery 而言，这是我想出的似乎工作得很好的方法:

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

上面工作示例的演示

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

解决方案

这是我的想法:

HTML

CSS

#selector {高度:100vh；}

JQUERY

function calcVH() {$('#selector').innerHeight( $(this).innerHeight());}(功能($){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.

我只知道这是 Mobile Chrome Android 中的一个问题，但我猜这对于 Chrome iOS 也是一样的.如果需要，您可以轻松添加移动检测选项，这样它只会在您需要时运行.我个人使用 Detectizr 效果很好，但老实说，因为它非常轻巧，添加了一些东西除非您已经在使用它，否则这样做可能不值得.

希望这能尽快解决，因此不需要 javascript 解决方案.此外，我尝试添加 resize 事件，以防浏览器宽度调整大小，但在看到这个问题后，我从答案中删除了它.如果您想尝试使用这些，只需将以上更改为:

JQUERY

function calcVH() {$('#selector').innerHeight( $(this).innerHeight());}(功能($){calcVH();$(window).on('orientationchange resize', function() {calcVH();});})(jQuery);$(window).on('resizeorientationchange', 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);

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() );
}
$(window).on('load 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() {

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

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