移動端相容處理

標籤：body   去除   div   軟鍵盤   log   一個   height   on()   button   

首先上一段判斷android和ios的js代碼

  function navigator(){        var u = navigator.userAgent;        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android終端        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端        if(isAndroid){            //安卓        };        if(isiOS){            //ios        };    };navigator();

IOS常見問題：

1.搜尋網頁的搜尋按鈕不顯示，加form解決。

<form action="">          <input type="search" name="" id="" value="" /> </form>

2.去除input陰影和黑邊，以及type=“search”的小叉叉。

css：//去除陰影和黑底input:-webkit-appearance:none;(全域input都會去除陰影和黑底，可以針對某個input就行了。)//去除小叉叉input[type="search"]::-webkit-search-cancel-button{     -webkit-appearance:none;}

ios:監聽鍵盤彈起和收合：

$(document).on("focusin",function(){            //鍵盤彈出})$(document).on("focusout",function(){            //鍵盤收合})

ios:當頭部輸入框聚焦時，想要彈起底部固定定位的元素，放在鍵盤上方，比如footer，或者上傳圖片的按鈕什麼的，但是發現彈不起來，沒關係我有解決方案。

function navigator(){        var u = navigator.userAgent;        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android終端        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端        if(isAndroid){                    };        if(isiOS){            $(document).on("focusin",function(){                                //鍵盤彈起時，讓捲軸滾動到底部，                $(window).scrollTop($("body").height());                                 //設定定時器                setTimeout(function(){                                        //擷取文檔高度                    var clientHeight= document.body.clientHeight;                                         //擷取滾動高度--也就是鍵盤高度                    var scrollTop = document.body.scrollTop;                    //讓你想要的底部元素的bottom：鍵盤高度。                    $(".bottom").css("bottom",scrollTop+"px");                    //最後再設定一個定時器讓捲軸回到頂部。                                          setTimeout(function(){                                               $(window).scrollTop(0);                                          },300);                },300);            });            $(document).on(‘focusout‘, function () {                 //軟鍵盤收合的事件處理                                 //讓底部元素回到底部。                $(".bottom").css("bottom","0");            });        };    };navigator();                                                                                                                   

android：

1.鍵盤收合事件：

function navigator(){        var u = navigator.userAgent;        var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Adr‘) > -1; //android終端        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端        if(isAndroid){              var wHeight = $(window).innerHeight();   //擷取初始可視       視窗高度                      $(window).resize(function() {         //監測視窗大小的變化事件                         var hh = $(window).innerHeight();     //當前可視視窗高度                         var viewTop = $(window).scrollTop();   //可視視窗高度頂部距離網頁頂部的距離                         if(wHeight > hh){                                          //可以作為虛擬鍵盤彈出事件                                               }else{                                        //可以作為虛擬鍵盤關閉事件                                                           };                              wHeight = hh;                        });        };        if(isiOS){                    };};navigator();                                         

 

移動端相容處理