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


填寫表單時會調出手機上面的軟鍵盤,若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有定位),就不會頂上去,但是只有當前編輯的部分會顯示出來。不過可以滑動。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM