平时移动端的一些总结

发表于   |   分类于   |  

说在开头

工作接触移动端也有几个月了。本人也比较懒，这里正好做个总结。方便平时坐地铁途中回顾0.0

##移动端的一些适配
之前做移动端面对的适配问题很棘手。不过现在主流也就是这几种情况

  • 640px设计稿切320px
    这一种一般很简单直接让UI妹子给你640的设计稿,然后如果一个元素width为30,则写的时候改为15px 即可。。
  • 等比缩放
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <script>(function () {
                var w = window.screen.width, s = w / 750, u = navigator.userAgent, m = '<meta name="viewport" content="width=750,';
                if (/android (\d+\.\d+)/i.test(u)) {
                    if (parseFloat(RegExp.$1 > 2.3)) {
                        m += "minimum-scale = " + s + ", maximum-scale = " + s + ","
                    }
                } else {
                    m += "user-scalable=no,"
                }
                m += 'target-densitydpi=device-dpi">';
                document.write(m)
            }());</script>

这里我设置的是750的设计稿，这种适配的方式就是有点好处，可以直接写原始的px,比较方便，而且手机上面体验效果也不错。不过有的安卓机器(极少数)会有Bug。。比如我那个产品大佬的安卓手机…. 解决办法不明。。。。。

  • 使用动态rem,动态改变font-size
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    (function init(){
                var width=document.documentElement.clientWidth;
                var head=document.getElementsByTagName("head")[0];
                var style=document.createElement("style");
                if(width>640){
                    style.innerHTML="html,body{font-size:"+64+"px;"+"width:"+640+"px;"+"margin:0 auto;}"+
                                    ".footer-main{width:640px;margin:0 auto}";
                }else{
                    style.innerHTML="html,body{font-size:"+width/10+"px;}";
                }
                head.appendChild(style);
                for(var i=0;i<document.getElementsByTagName("style").length-1;i++){
                    document.getElementsByTagName("style")[i].remove();
                }
            })()
            window.addEventListener("resize",function(){
                init();
            })
1
2
3
4
5
这样只用知道 设计稿的原本大小，和元素的原本大小(px)
然后用
10/设计稿宽*原本元素高 对应 height Y rem
10/设计稿宽*原本元素宽 对应 width X rem
然后就直接可以根据屏幕大小适配了。

怎么说呢？比如我一个设计稿是750,一个元素width为100px;
height为100px。
转换之后
width= 100px10/750=1.34rem;
height=100px10/750=1.34rem;
当然 如果是使用sass这样 用一个自定义方程计算，更好。

移动端的一些常用 meta

这一点没啥好说的。。。可能别处别我这边更为详细一点..不过我平时也就是使用这一些

1
2
3
4
5
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

移动端的tap点击穿透

0_1474734469040_1474726441667_3.png

触发过程：当网速良好的情况下，点击右上角抽奖.瞬间弹出模块框，然后回到首页按钮响应。页面发生跳转。回到首页

解决办法：

  • 针对zepto.js的tap办法,将tap事件触发改为,touchend,然后禁止其默认事件

    1
    2
    3
    btn.on("touchend",function(e){
        e.preventDefault();
    })

  • 设置一个setTimeout延迟300ms之后响应

    1
    2
    3
    4
    5
    btn.on("tap",function(){
        setTimeout(function(){
            todo....
        },400)
    })

利用padding-top高度自适应占位

原理:

不管是margin还是padding如果百分比都是取的相对于父级的宽度。
例如

1
2
3
<div class="ct">
<div class="content"></div>
</div>

然后设置

1
2
3
4
5
6
7
8
9
10
11
body{
           width:600px;
       }
       .ct{
           width:50%;
           background:red;
       }
       .content{
       //这里相对于父级宽度,
           padding-top:100%;
       }

0_1474734504330_1474726440408_2.png

如果是如要上面装有图片。一个很好的一点就是.用浮动,利用伪类元素padding-top:100%撑开容器。然后设置imgposition:absolute

ios input框激活后不支持position:fixedbug

就好比这个情况0_1474734485151_1474731464942_2.png

触发过程
当用户使用ios系统点击激活input框时,此时浏览器会不在支持fixed

解决办法
两种方案：

  • 使用js控制，当input框激活时，改变将position状态由fixed改为relative,然后当input框失去焦点时,将position状态由relative恢复成fixed。

不过这种办法感觉挺麻烦的。。。一般能用css解决的就经量用css解决。

  • 模拟position:fixed
    好比这样
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    header{
    			height:200px;
    			width:100%;
    			position: absolute;
    			left:0;
    			top:0;
    		}
    		section{
    			position: absolute;
    			width:100%;
    			left:0;
    			top:200px;
    			bottom:200px;
    			-webkit-overflow-scrolling: touch;   
    		}
    		footer{
    			position: absolute;
    			height:200px;
    			width:100%;
    			left:0;
    			bottom:200px;
    		}


            <header>我是头部</header>
        	<section>我是内容</section>
        	<footer>我是页脚</footer>

目前 一直使用的还是第二种css的方法。让section内部滑动

移动端常见取消默认重置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*去除点击高亮效果*/
a, button, input, select, img, label {
    -webkit-tap-highlight-color: transparent;
    outline: medium none;
}
input::-moz-focus-inner {
    border: none;
    padding: 0;
}
select, input {
    vertical-align: middle;
}
/*去除输入框默认样式*/
button, input[type="text"] {
    -webkit-appearance: none;
}

文本溢出隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//单行文本溢出
.xx{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}
//多行文本溢出
.xx{
        display:-webkit-box !importmort;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;(数字2表示隐藏两行)
}

暂时就想到这些啦,后面的在总结