防止手机页面软键盘调出时布局被挤压--转

填写表单时会调出手机上面的软键盘，若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;100%;height:"+deviceH+";background-size: 100%"+deviceH);
});

//失去焦点后还原
$('select,input').on("blur",function(){
  $("body").attr("style","background:url('./img/bg2.jpg') no-repeat;100%;height:100%;background-size: 100% 100%;");
});       

后来发现，这一条不仅是多余的，还会造成多个input时出现问题。其实说白了就是有表单的时候不要用css去铺满背景，而是用js动态监测屏幕高度（px）然后去铺满。

还有一点就是，调出软键盘时手机好像默认会把整个表单顶上去，防止被键盘遮住。测试了一下，如果表单时相对于body定位（body有定位），就不会顶上去，但是只有当前编辑的部分会显示出来。不过可以滑动。

以前总觉得表单编辑时太丑终于不用将就了。