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

手机端软键盘弹出布局兼容问题_第1张图片
1515046525(1).jpg

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

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

 
        

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

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

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

你可能感兴趣的:(手机端软键盘弹出布局兼容问题)