移动端常见问题总结

Posted 2020-11-10 dongkx

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")        }    });