时间戳

首页 > 技术文章 > 移动端爬坑总结

移动端爬坑总结

worldly1013 2016-12-17 00:30 原文

一、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框获取焦点后软键盘弹起压缩可视界面使其布局错乱

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

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

　　2）常见情况：底部footer采用fixed定位在最底处，安卓机软键盘弹起时将底部footer也随之顶起

　　解决方案：

　　1.设定body的高度始终为软键盘弹起前的可视界面高度

$('body').height($('body')[0].clientHeight);

　　2.将footer布局由fixed定位改为absolute定位，而且是相对body定位的

body{
  position:relative    
}

footer{
　　position:absolute;
　　left:0;
　　right:0;
　　bottom:0;
}

　　

　　

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

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

　　transform规范

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

四、滚动条样式不统一

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

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

五、chrome浏览器下显示的最小字体为12px

　　因为chrome浏览器使用的为webkit内核，添加以下代码即可：

html { -webkit-text-size-adjust:none }

六、img标签在块元素中底部有3px的空白

img{
  display:block;  
}

七、inline－block元素横排时元素之间有间隙

　　原由：间隙由于换行或者回车产生空白符所致

　　方法一：

　　1）给父元素设置font-size:0;

　　2) 给inline-block元素设置实际需要的字体大小

　　方法二：

　　将元素写在一排显示

<ul>
       <li>111</li>
       <li>222</li>
       <li>333</li>
       <li>444</li>
       <li>555</li>
       <li>666</li>         
</ul>
ul{
  font-size:0  
}

li{
  font-size:12px;  
}

 

 

 

 

　　

　　

推荐阅读