使用 CSS 计算 Chrome Android 上的视口高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39384154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculating Viewport Height on Chrome Android with CSS
提问by Bryan Willis
So I noticed that mobile Chrome calculates the address bar into the viewport height. Because of this using height: 100vhon an element doesn't work because when the address bar scrolls the viewport height changes.
所以我注意到移动版 Chrome 会将地址栏计算到视口高度中。因此，height: 100vh在元素上使用不起作用，因为当地址栏滚动时，视口高度会发生变化。
I was actually able to find a questionthat 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.
我实际上能够在 ios 上找到一个有相同问题的问题，但经过进一步调查后，我意识到这发生在所有移动 Chrome 浏览器上。当地址栏滚动出视口然后再次滚动到视口时，视口高度会发生变化。
This causes any element using vhto recalculate which makes the page jump. It's extremely annoying when using a background image because it causes the image to resize on scrolling.
这会导致使用vh重新计算的任何元素使页面跳转。使用背景图像时非常烦人，因为它会导致图像在滚动时调整大小。
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.
您只能在使用移动版 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).
我的问题是，我想知道有没有办法解决这个问题，或者如果没有，如何在不导致页面跳转（css 或 js）的情况下计算移动 chrome 上的全高。
http://s.codepen.io/bootstrapped/debug/qadPkz
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:
更新：就使用 jquery 而言，这是我想出的似乎工作得很好的方法：
function calcVH() {
$('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
calcVH();
});
I'd love to be able to do this without javascript though if someone has a CSS alternative that they know works.
我很乐意在没有 javascript 的情况下做到这一点，但如果有人有一个他们知道有效的 CSS 替代方案。
采纳答案by Bryan Willis
Here's what I went with:
这是我的选择：
HTML
HTML
<div id="selector"></div>
CSS
CSS
#selector {
height: 100vh;
}
JQUERY
查询
function calcVH() {
$('#selector').innerHeight( $(this).innerHeight() );
}
(function($) {
calcVH();
$(window).on('orientationchange', function() {
calcVH();
});
})(jQuery);
PURE JS (NO 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);
Simply change #selectorto whatever your css selector is. If you use the pure js version you need to use an ID unless you change .getElementByIDto .getElementsByClassName.
只需更改#selector为您的 css 选择器即可。如果使用纯 js 版本，则需要使用 ID，除非更改.getElementByID为.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 detectoption if you wanted so this only runs when you need it to. Personally I use Detectizrwhich 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.
我只知道这是 Mobile Chrome Android 中的一个问题，但我猜它对于 Chrome iOS 也是一样的。如果需要，您可以轻松添加移动检测选项，以便仅在您需要时运行。我个人使用Detectizr效果很好，但老实说，因为它非常轻巧，所以添加这样的东西可能不值得，除非你已经在使用它。
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:
希望这很快得到修复，因此不需要 javascript 解决方案。此外，我尝试添加 resize 事件，以防浏览器宽度调整大小，但在看到这个问题后，我从答案中删除了它。如果您想尝试使用它们，只需将以上更改为：
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)
纯 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);
回答by Blueored
I tried every suggestion ... but nothing works for me. Either with Chrome or IOS.
我尝试了每一个建议......但没有什么对我有用。无论是 Chrome 还是 IOS。
But then...I had an Idea!
但是……我有个主意！
1.You can leave the standard entry in the head
1.可以在头部留下标准条目
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
2.Write an JS in the Foot(be sure jQuery knows about your elements) of the site e.g
2.在站点的脚部（确保 jQuery 知道您的元素）中编写一个 JS，例如
<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.No more Navigationbar of chrome or whatever will disturb your output or what you want to see
3.不再有 chrome 的导航栏或任何会干扰您的输出或您想看到的内容
I really hope this will help somebody !
我真的希望这会对某人有所帮助！
Maybe this is only a template of doing it muchmuchmuch greater.
也许这只是一个做得更好的模板。
