转载(http://adt.aicai.com/index.php/archives/179/)
瞎折腾移动端的项目已经很长一段时间了，并不像其它企业一样，可以有项目组去完成，基本都是一个人瞎尝试，时而web，时而web app。恍恍惚惚过了这段岁月，也不晓得自己忙了啥。总叫别人去总结，让别人学会总结，也该为自己总结总结了。也为了团队之间更好的知识共享吧。如何开发 移动端就跟如何上菜一样，上菜有规则，先冷后热，先菜后点，先咸后甜，先炒后烧等等。按照一定的程序来才能恰到好处地掌握。那么，现在还是上菜吧，客官等 久了... ...
前菜（凉菜，冷盘）
一、移动端开发与PC端开发不同
大家都知晓，手机种类千千万，也导致移动端开发面对的屏幕尺寸是各种头疼。
Web：固定布局和弹性布局
Web app：响应式布局
二、调试工具
firefox的响应式设计视图:Firefox 浏览器内置了 自定义设计视图 的功能，可以通过 Firefox->Web 开发者->自定义设计视图（或者摁下 Shift + Ctrl + m ）。相比网络工具，运行更加流畅，无需联网。
Chrome开发，chrome浏览器也有个Emulation，如图：
另外，就是设备上的调试，方法很多。
1. 直接把做好的静态页面放到手机用浏览器打开查阅
2. 在本地搭建环境，比如php环境，局域网访问ip查阅页面（有搭建过博客的都知道）
3. 远程调试
A:Android 设备 Chrome 远程调试
B:uc浏览器开发者调试
开胃汤
那么，问题来了，移动端开发到底该如何下手？
1．关于viewport
- a)概念：设备的pixels和css的pixels（总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染。
） - b)概念：视窗 viewport（viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。 ）
下面是link的一些用法，但是移动端也好web端也好，为了减少HTTP请求数， 个人建议最好能使用媒体查询来解决的可以尽可能的用媒体查询。
媒体查询如下：
头菜
作为头菜，一般宴会来说，头菜是代表性的菜点。那么说到移动端呢？
-
移动端的reset
时过境迁，Reset 逐渐淡出的前沿前端的视野，normalize.css 取 而代之。normalize.css，统一样式的同时保留可辨识性；reset 统一样式，完全没有可读性，破坏原有标签的语义化。针对每个项目的不同，各自可以基于Normalize.css，根据目前我们大家的使用习惯进行了一些 清零及移动端的特点添加一些基础样式。
在这里会提到一个rem,想当初应该很多人也讨论研究过px，pt，em等单位吧。rem是CSS3新 引进来的一个度量单位，举个例子：“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大 小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考 值。
浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}可以用以下的代码片段保证在低端浏览器下也不会出问题
html { font-size: 62.5%; }body { font-size: 14px; font-size: 1.4rem; } /* =14px /
移动端的html5+css3
css3代替DOM animation,使用setTimeout定时器, 定时修改DOM元素的style属性。
css3使用设备GPU渲染，动用硬件设备本身的计算能力来做一些展示，效率上要比DOM animation要高很多。
@keyframesanimation-name（动画名称）animation-duration（动画持续时间）animation-delay（延迟执行时间）animation-timing-function（动画形变函数指定）animation-play-state（播放状态指定）animation-iteration-count（无限循环）
至于HTML5，大家目前用的最多的也就仅仅是那几个标签而已，想详细了解的自便吧。比如：
<input type="text" placeholder="规定帮助用户填写输入字段的提示"><input type="number"><input type="date"><input type="range"><input type="color"><input type="email"><input type="search">
移动端的javascript
先说这一类的框架吧：
JQuery mobile，Sencha Touch等都是很庞大的UI框架。
Zepto.js：框架小，类jQuery，没有多余的其他模块，适合团队自己扩展。（不支持WP）
没有一个很好的团队去折腾的话，还是建议使用jqm，因为你到后面还是会改成jqm搭配Hammer.js来搭建
说起移动端的javascript，使用手势操作代替鼠标输入/出事件。开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。那就先来看看PC端的一些事件：(mousedown, mouseup, click)
移动端的手势事件：
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel //当在滑动手机的过程中突然出现一个系统事件，比如电话。这会就cancel掉。（基本很少用）
为何要用touch事件代替click事件？
- click事件300ms延时
- touch事件支持多点触摸
- 手势操作
移动端的css3的自定义字体（@font-face），前一篇文章有做介绍。这里就不详细述说。
主菜
有人会问，图片该怎么切，拿到的psd文件尺寸是多少，按照何种尺寸去制作？还是无从下手。那么，移动端页面那么小，做页面的时候按照何种安全可视尺寸来呢？
alert('' + window.innerWidth + ';height:' + window.innerHeight);
目前我知道的移动端可视区尺寸
- iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
- iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
- Note2 360 * 567 (未隐藏URL与状态栏)
- iPad 3/4 768*928 (未隐藏URL与状态栏)
- GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
- 小米2A 360 *567 (未隐藏URL与状态栏)
- HTC G10 320 * 460
- 酷派大神 400615/400568(未隐藏URL与状态栏)
设计稿按照640的尺寸去切（有的人按照480的去切，主要是考虑图片资源的浪费），然后页面可以当作是320的来写，也就是说，字体大小以及图片大小，在页面制作的时候都需要除以2。
为什么要按照640的来切，却用320的来制作呢？因为设备分辨率太多，图片切大的去压缩，在高分辨率的设备，图片就不会变得很小了。
其实结果可知，手机端页面，因为上面viewport设置了，一般浏览器都是320，360，400这类宽度制作页面。
1、meta，link都有了
2、css reset也有了
3、尽可能的使用Flexbox 布局，尽量放弃float
4、图片的切法和媒体查询
5、移动端js的事件使用
6、最后手机测试完美收工
（简单粗糙上档次吧？）
甜品（饭后闲谈消化）
这里我必须说的是局部刷新，定位问题吧。
position:sticky与position:fixed布局，因为存在太多兼容bug，于是都会利用iscroll来解决这个问题。
如何使用，请移步iscroll官网查阅，这里不作详细说明。因为这里每一个点都可以来了说一篇或者好几篇文章。
盒子边框溢出
当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动
条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。
ios数字颜色样式超过9位后失控
这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。
css3关于background-size缩放背景图像的使用;如何用flex和translate等分，居中。