移动端web开发的小笔记

移动端的开发跟PC端的开发还是稍有区别的，以下内容是个人移动开发的经验，后期会不定时更新错误以及新的内容
一、从meta标签说起
首先，在移动端，我们希望将页面窗口自动调整到设备宽度，需要的meta标签是这样

 <meta name="viewport" content="width=device-width, initial-scale=1"/>

为什么会有这个需求呢 ？为什么需要将页面窗口自动调整到设备宽度呢？
这涉及到了移动设备（ios, android）的屏幕尺寸问题，device-width指的是设备的物理宽度，width是页面宽度，这么做是为了兼容更多的设备。

接下来，很多时候，我们不希望页面能够双击放大，该如何呢？

 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0;">

这样，我们就规定了页面不可以双击放大了

很多情况下移动设备会自动识别一些数字为电话号码，这有时候并不是我们想要的，

<meta name="format-detection" content="telephone=no" />

加入这个meta标签会让全篇的数字都不自动识别为电话号码，但是，如果我希望有些数字还是能被识别为电话号码又该怎么做呢 ？

<a href="tel:000-000-0000">000-000-0000</a>

这样，加入一个a标签，给它一个tel属性写入电话号码作为属性值就好啦

二、移动端的长度单位
在移动端如果还像在PC端一样使用px作为长度单位，因为涉及到像素密度的问题，在很多时候都需要大量的响应式媒体查询，如果项目比较大的话，这是一个工作量很大的任务，但是如果使用rem，相对于根元素的相对单位，就会为你的代码减少很多工作量
一般情况下我是这么做的

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11.25px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12.5px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:13px}}
@media screen and (min-width:640px){html{font-size:20px}}

当然还会有其他的写法，比如font-size的基值设为100px，其他的屏幕大小的font-size值相应的为上面代码的10倍，在上面的代码中，我在页面中需要配置设置屏幕的最大宽度为640px，这样才能更有可能使页面布局更加符合我的设计。

三、移动端的背景设置
在移动端你仍然可以给一个元素用图片设置背景，为了使其按照宽度百分百显示，你只需要指定background-size为100%即可。
像下面这样

.bg-wrapper{
    width: 100%;
    height: 100%;
    background: url(bg.jpg) no-repeat center 0;
    background-size: 100% auto;
}

还有些时候我们想给背景做一些渐变，在PC端，因为考虑到浏览器兼容性，为了兼容之前的浏览器大多数时候的渐变需要采用图片来实现，但是在移动端，你可以考虑css3的新特效，像下面这样，

.bg{
    background-color: #1d1d1d;
    background-image: -moz-linear-gradient( top,#2a2d30,#191919);
    background-image: -webkit-linear-gradient(top,#2a2d30,#191919);
    background-image: -o-linear-gradient(top,#2a2d30,#191919);/*括号里的top表示从上到下渐变，你也可以使用left表示从左到右渐变，你也可以指定多于两个的渐变值*/
    background-image: linear-gradient(top,#2a2d30,#191919);
    max-width: 640px;
    margin: 0 auto;/*加上最后面的这两句使页面显示的最大宽度是640px,且居中显示，这是为了在PC端查看页面时页面也能最大程度的无障碍的显示出来*/
}

四、移动端的垂直居中
在PC端想要垂直居中，你可能想到使用父级table定位，子级table-cell来实现垂直居中，如果指定元素的宽高，还可以使用absolute定位，top50%, margin-top负高的一般来实现垂直居中，再或者，你可以在JS中计算然后再实现垂直居中，但是在移动端，近来发现了一个新的属性来实现垂直居中，就是用transform的translate来实现

.test{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

关于移动端开发，还有很多小tips，持续更新