范畴
移动端 web 浏览器，至少需要适配的，UC,QQ,各手机内置浏览器，chrome，safari。
是不是觉得和PC端差不多？错了！每款同一版本ios的内置浏览器一样。但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统)。何况每款浏览器还有不同版本。所以移动端web的坑远多于PC端。这是它有N多辅助库的原因。
优点是，它对 CSS3，H5的支持远胜PC端（因为PC端的主力IE在拖后腿）
解决方案
浅析
-
原生加载
<script>标签罗列，放</body>标签前； -
模块化加载
requireJS/seaJS. 前者为 AMD，后者 CMD；
其实两者差不多，都用来做依赖管理，你看顺眼就用哪个吧，两者异同看这里；
注意：如果要打包，勿用别名； -
路由
- 用途：不刷新改变URL；通过URL渲染对应内容；
- 实现原理 ：
HTML4 hash 方法 #aaa ---> 改变 hash ---> 监听 hashchange ---> 页面前进后退时触发 ---> 渲染页面
HTML5 state 方法 pushState 改变 URL (一般也是加 hash) ---> 监听 popstate 事件 ---> 页面前进后退时触发 ---> 渲染页面
不支持 hashchange 事件怎么办？ setTimeout/setInterval 10ms 扫描 hash 的变化。
H5 state 老手机不支持怎么办？优雅降级为 H4 hash 写法，兼容不好怎么办？同样只能用定时扫描。
Backbone的路由也是基于此原理实现。由 History、Router 两对象构成。
- fastclick.js
- 原因：click 事件有 300ms 延迟。touchstart/touchend 在滚动时会触发。（老版 zepto/jquery.mobile 的 tap 事件也会透视）；
- 分析：为什么 click 事件有 300ms 延迟呢？在 B 元素上有半透明红色遮盖层 A，黄色 B 元素内有可点击链接 C；点击 A，touchstart 等执行，A 消失，300ms 后，执行 B click 事件；
- 实现原理：
- 延迟问题：注销原生的click事件；在 touchstart，touchend 事件后，通过坐标判断是否为类 click 事件，抛出自定义的类 click 事件；
- 透视问题：通过 e.preventDefault() 阻止浏览器的默认处理
- 注意：meta 设置了 user-scalable=no 或者 touch-action css 属性(仅 IE10 支持)，click 就不会有延迟，fastclick 也会对此判断。
- 用法：
window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );
- hammer.js
- 手势事件：原因是原生 getsture 事件 gesturestart、gesturemove、gestureend；兼容问题非常严重；
- iscroll5.js
- 原理：css3过渡动画；
- 原因：滚动不流畅 (IOS 已做了优化，如 -webkit-overflow-scrolling: touch;) 没有滚动条；在 fixed 和滚动条结合出现的诡异问题。
- 用法：
var iScroll = new IScroll(dom, {
scrollX: true,//使用横向滚动条
scrollY: false,//不使用纵向滚动条
click: false,//不允许点击
preventDefaultException: { tagName:/^(a|input)$/ }//让a input标签可点击
});
//在400ms内滚动到指定元素el 往左偏移10像素
iScroll.scrollToElement(el,400,10)
//让滚动区域内容在指定的时间内滚动到x/y的位置 scrollTo(x, y, time, relative)
iScroll.scrollTo(0,100,400);
//100ms内向下滚动400px。如果relative设为true，则向上。
* 注意：移动端别直接用 iscroll5，它太大了；只适合阉割版 iscroll-lite.js（压缩后5K左右），它仅支持基本的滚动，如滚动到某元素，要处理滚动事件，还需要自己添加 onScroll 事件进去。
7. **animate.css**
* 原理：css3过渡、动画；
* 用法：添加它提供的 class 样式，自己再添加 class/id 去调整样式
8. **enquire.js**
* 原理：利用了原生的 matchMedia() 方法，处理 JS 的响应式布局；
* 用法：
```javascript
//屏幕小于500px时
enquire.register("screen and (max-width:750px)", [
//match匹配，unmatch不匹配
{ match : function() { console.log("handler 1 matched"); } },
{ match : function() { console.log("handler 2 matched"); } }
]);- zepto
DOM库，推荐它的原因是它比 jquery.mobile 小。基本采用 HTML5/CSS3 原因。
注意：它的自定义事件仅支持 DOM，原因是它是创建类事件 Event，再 dispatchEvent。