防止手機頁面軟鍵盤調出時布局被擠壓

填寫表單時會調出手機上面的軟鍵盤，若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%;"); }); 
       后來發現，這一條不僅是多余的，還會造成多個input時出現問題。其實說白了就是有表單的時候不要用css去鋪滿背景，而是用js動態監測屏幕高度（px）然后去鋪滿。

還有一點就是，調出軟鍵盤時手機好像默認會把整個表單頂上去，防止被鍵盤遮住。測試了一下，如果表單時相對於body定位（body有定位），就不會頂上去，但是只有當前編輯的部分會顯示出來。不過可以滑動。

以前總覺得表單編輯時太丑終於不用將就了，哈哈哈哈哈哈哈哈哈~~~~~~~~~