移动端 web 解决方案

范畴

移动端 web 浏览器,至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari。
是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样。但每款同一版本android的不同品牌手机内置浏览器有很多细节上的差别(每个手机运营商称其为优化系统)。何况每款浏览器还有不同版本。所以移动端web的坑远多于PC端。这是它有N多辅助库的原因。
优点是,它对 CSS3,H5的支持远胜PC端(因为PC端的主力IE在拖后腿)

解决方案

浅析

  1. 原生加载
    <script> 标签罗列,放 </body> 标签前;

  2. 模块化加载
    requireJS/seaJS. 前者为 AMD,后者 CMD;
    其实两者差不多,都用来做依赖管理,你看顺眼就用哪个吧,两者异同看这里;
    注意:如果要打包,勿用别名;

  3. 路由

  • 用途:不刷新改变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 两对象构成。
  1. 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 );
  1. hammer.js 
  • 手势事件:原因是原生 getsture 事件 gesturestart、gesturemove、gestureend;兼容问题非常严重;
  1. 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"); } }
]);
  1. zepto
    DOM库,推荐它的原因是它比 jquery.mobile 小。基本采用 HTML5/CSS3 原因。
    注意:它的自定义事件仅支持 DOM,原因是它是创建类事件 Event,再 dispatchEvent。
发表评论
* 昵称
* Email
* 网址
* 评论