防止手机页面软键盘调出时布局被挤压--转
填写表单时会调出手机上面的软键盘,若body是按照百分比做自适应布局会挤压布局。
解决方法:
1、将表单内容按照px定宽高。
2、整个表单form绝对定位(尽量保证各表单位置不变)
3、form里面的元素相对定位,上下的间隔使用margin-top
4、以上保证表单不会挤压变形,若body上有自适应的背景图片,防止背景图片压缩,可以这样:
js检测软键盘是否调出来动态的控制body和背景图片的大小。
但是百度了一下,暂没找到检测软键盘出来的方法,那就假设表单被点击时软键盘就出来了(一般手机都默认这样)
于是这样:
//获取设备高度(软键盘调出来时高度也会变小,所以在点击事件前获取) var deviceH=document.documentElement.clientHeight+"px"; //表单获得焦点后动态改变body和背景图片的大小 $('select,input').on("click",function(){ $("body").attr("style","background:url('./img/bg2.jpg') no-repeat;width:100%;height:"+deviceH+";background-size: 100%"+deviceH); }); //失去焦点后还原 $('select,input').on("blur",function(){ $("body").attr("style","background:url('./img/bg2.jpg') no-repeat;width:100%;height:100%;background-size: 100% 100%;"); });
后来发现,这一条不仅是多余的,还会造成多个input时出现问题。其实说白了就是有表单的时候不要用css去铺满背景,而是用js动态监测屏幕高度(px)然后去铺满。
还有一点就是,调出软键盘时手机好像默认会把整个表单顶上去,防止被键盘遮住。测试了一下,如果表单时相对于body定位(body有定位),就不会顶上去,但是只有当前编辑的部分会显示出来。不过可以滑动。
以前总觉得表单编辑时太丑终于不用将就了。
posted on 2017-07-04 15:54 CNundefined 阅读(314) 评论(0) 编辑 收藏 举报