手机端软键盘弹出布局兼容问题

1515046525(1).jpg

这是pc手机端响应式页面，就会出现问题尤其是在占满屏幕这种布局需求的情况下

<div class="person">
        <div class="child">
            
        </div>
    </div>

如person占满屏幕，child包含其中，居中或是怎样的

 <meta name="x5-fullscreen" content="true">
        <meta name="full-screen" content="yes">

可以使当前页面在手机浏览器，微信浏览器中阻止滑动使页面有全屏效果（没有了顶标签那一块），但是软键盘弹出，滑动屏幕时布局依然会出bug
有一个监测屏幕尺寸变化的方法

/*手机端软键盘弹出布局兼容*/
var scerrnHeight = $(window).height();
$(window).resize(function(){
    if($(window).width()<900){
        $('.person').css('height',scerrnHeight);
    }
});

当手机端，屏幕大小发生变化时（软键盘弹出），该person高度依然是设备屏幕高度而不是屏幕可视区域的高。