html手机访问不变形,html – CSS3 100vh在移动浏览器中不变

我有一个非常奇怪的问题…在每个浏览器和手机版本我遇到这种行为：

>当您开始滚动页面时，当您加载页面(显示地址栏)时，所有浏览器都有顶部菜单。

> 100vh仅在视口的可见部分计算，所以当浏览器栏滑动100vh增加(以像素为单位)

>所有布局重新绘制并重新调整，因为尺寸已更改

>用户体验不好的跳跃效果

怎么可以避免这个问题？当我第一次听到viewport-height我很兴奋，我以为我可以使用它的固定高度块istead使用javascript，但现在我认为唯一的办法是事实上javascript与一些resize事件…

任何人可以帮助我/提出一个CSS解决方案？

简单测试代码：

/* maybe i can track the issue whe it occours... */

$(function(){

var resized = -1;

$(window).resize(function(){

$('#currenth').val( $('.vhBox').eq(1).height() );

if (++resized) $('#currenth').css('background:#00c');

})

.resize();

})

*{ margin:0; padding:0; }

/*

this is the Box which sould keep constant the height...

min-height to allow content to be taller than viewport if too much text

*/

.vhBox{

min-height:100vh;

position:relative;

}

.vhBox .t{

display:table;

position:relative;

width:100%;

height:100vh;

}

.vhBox .c{

height:100%;

display:table-cell;

vertical-align:middle;

text-align:center;

}

this div height should be 100% of viewport and keep this height when scrolling page

this div height should be 100% of viewport and keep this height when scrolling page