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

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高度依然是设备屏幕高度而不是屏幕可视区域的高。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容