移動端常見問題總結

標籤：element   one   觸發事件   計時   resize   定位在   console   blur   tor   

1.判斷機型：

// 判斷手機是移動端還是安卓
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終端

 

2.用scroll來解決ios喚起軟鍵盤時absolute定位在最下方的元素錯位：

var bfscrolltop = document.body.scrollTop;//擷取軟鍵盤喚起前瀏覽器滾動部分的高度    $(".txt").focus(function(){//在這裡‘input.inputframe’是我的底部輸入欄的輸入框，當它擷取焦點時觸發事件        interval = setInterval(function(){//設定一個計時器，時間設定與軟鍵盤彈出所需時間相近        document.body.scrollTop = document.body.scrollHeight;//擷取焦點後將瀏覽器內所有內容高度賦給瀏覽器滾動部分高度        },100)    }).blur(function(){//設定輸入框失去焦點時的事件        clearInterval(interval);//清除計時器        document.body.scrollTop = bfscrolltop;//將軟鍵盤喚起前的瀏覽器滾動部分高度重新賦給改變後的高度    });    // 安卓鍵盤彈出處理    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;    $(window).on(‘resize‘, function () {        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;        if (clientHeight > nowClientHeight) {            console.log("安卓彈出")        }        else {            $(".bottom_name").addClass("none")        }    });

 

 

3.用2的方法解決軟鍵盤的問題時需要給最外層的box設定height:auto;overflow-y:scroll;但是如果後台用了lazyload外掛程式會要求不能使用height:auto;overflow-y:scroll，因為它需要根據scroll去判斷頁面是否滾動，是否需要載入內容。

 

4.有些事件在ios需要雙擊才能觸發，可以用下面人為的方法觸發兩次

　　a.click();

　　setTimeout(function(){

　　　　a.click()

　　},100)

 

 

var bfscrolltop = document.body.scrollTop;//擷取軟鍵盤喚起前瀏覽器滾動部分的高度    $(".txt").focus(function(){//在這裡‘input.inputframe’是我的底部輸入欄的輸入框，當它擷取焦點時觸發事件        interval = setInterval(function(){//設定一個計時器，時間設定與軟鍵盤彈出所需時間相近        document.body.scrollTop = document.body.scrollHeight;//擷取焦點後將瀏覽器內所有內容高度賦給瀏覽器滾動部分高度        },100)    }).blur(function(){//設定輸入框失去焦點時的事件        clearInterval(interval);//清除計時器        document.body.scrollTop = bfscrolltop;//將軟鍵盤喚起前的瀏覽器滾動部分高度重新賦給改變後的高度    });
    // 安卓鍵盤彈出處理    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;    $(window).on(‘resize‘, function () {        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;        if (clientHeight > nowClientHeight) {            console.log("安卓彈出")        }        else {            $(".bottom_name").addClass("none")        }    });

移動端常見問題總結