填写表单时会调出手机上面的软键盘，若body是按照百分比做自适应布局会挤压布局（iphone人家就好好着呢）。
解决方法：
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%;"); });
还有一点就是，调出软键盘时手机好像默认会把整个表单顶上去，防止被键盘遮住。测试了一下，如果表单时相对于body定位（body有定位），就不会顶上去，但是只有当前编辑的部分会显示出来。不过可以滑动。
以前总觉得表单编辑时太丑终于不用将就了，哈哈哈哈哈哈哈哈哈~~~~~~~~~
原文：http://www.cnblogs.com/hellolm/p/4991330.html