移动端爬坑总结

Posted 2020-08-23 worldly1013

一、ios系统下input框获取焦点后点击空白处不失去焦点

　　今天写完项目测试时突然发现ios系统input框获取焦点激活软键盘弹起后点击空白处软键盘怎么都不下去，最后发现原来是点击空白处input框根本就没有失去焦点的问题；然后放在android系统下测试并不存在此问题。

　　解决方案：手动添加程序监听input的获取与失去焦点事件，获取焦点时绑定touchend事件，当touchend事件触点在空白处让其input框失去焦点即可

objBlurFun("input");
//如果不是当前触摸点不在input上,那么都失去焦点
function objBlurFun(sDom,time){
    var time = time||300;
    //判断是否为苹果
    var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1;
    if(isIPHONE){
        var obj = document.querySelectorAll(sDom);
        for(var i=0;i<obj.length;i++){
            objBlur(obj[i],time);
        }


    }
}

// 元素失去焦点隐藏iphone的软键盘
function objBlur(sdom,time){
    if(sdom){
        sdom.addEventListener("focus", function(){
            document.addEventListener("touchend", docTouchend,false);
        },false);

    }else{
        throw new Error("objBlur()没有找到元素");
    }
    var docTouchend = function(event){
        if(event.target!= sdom){
            setTimeout(function(){
                sdom.blur();
                document.removeEventListener(‘touchend‘, docTouchend,false);
            },time);
        }
    };
}

二、input框获取焦点后软键盘弹起压缩可视界面使其布局错乱

　　移动端本来自信满满，正得意自己完美的布局时，往往却被弹起的软键盘而打乱。这次项目中遇见fixed定位的返回主页按钮在软键盘升起时因可视界面被压缩导致fixed定位的元素布局错乱

　　解决方案：因软键盘从下方弹起，所以我们可以把fixed定位的元素相对顶部定位就可以避免此问题了

三、fixed定位的元素在父元素transform属性值不为none时失效

　　规范中规定如果元素的transform值不为none，则该元素会生成包含块和层叠上下文，使其fixed定位、absolute定位元素和层叠上下文(index)受到影响

　　transform规范

　　解决方案：不要将fixed定位的元素放在拥有transform属性的元素内部

　　

四、滚动条样式不统一

　　移动端当内容超出固定高度容器出滚动条时，在安卓手机下滚动条样式较粗，非常难看，在苹果手机下没有滚动条，同时滚动时有阻塞感，滑动不顺畅；

　　解决方案：使用第三方组件如：iscroll、mui等