所以我注意到移动Chrome会将地址栏计算到视口高度.由于这个使用高度：元素上的100vh不起作用,因为当地址栏滚动视口高度变化时.
我实际上能够在ios上遇到相同问题的find a question,但经过进一步调查后我意识到这种情况发生在所有移动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;
}
使用移动设备上下滚动时,您将只能看到问题.
我的问题是,我想知道有没有办法绕过这个或如果不是如何计算移动铬的全高度而不会导致页面跳转(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选择器即可.如果使用纯js版本,则需要使用ID,除非将.getElementByID更改为.getElementsByClassName.
我只知道这是移动Chrome Android中的一个问题,但我猜测它也适用于Chrome iOS.如果您愿意,可以轻松添加mobile detect选项,只有在需要时才会运行.我个人使用的Detectizr运行良好,但说实话,因为它非常轻巧,添加这样的东西可能不值得,除非你已经在使用它.
希望这很快得到修复,因此不需要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)
function calcVH() {
var vH = Math.max(document.documentElement.clientHeight,true);
window.addEventListener('resize',true);
