移动端交互优化

1 点击：移动端的click事件有300ms的延迟
    目的：区分单击与双击事件（300ms内点击一次是单击，点击2次是双击）
    解决方案：引入移动框架如zepto,用tab事件代替click
        tab：不是原生事件，touchstart\touchmove\touchend模拟出来的事件
                                    基本条件
               1、从触摸到离开时间间隔短
               2、从起点到终点的距离小
                                    点击态
                                           给用户明确的点击反馈，提升用户体验
                方案1：使用：active伪类
                              缺点：滚动的时候也会触发样式
                方案2：js模型点击态（推荐）
                     //点击事件带点击态
                     $el.on('tap',function(e){
                      var $target=$(e.target);
                      $target.addClass('active');
                      setTimeout(function(){
                      $target.removeClass('active');
                      },150);
                     });
2 滚动
 1 弹性滚动
  全局滚动：滚动条在dom节点或更顶层
  局部滚动：滚动条在body下的某一个dom节点上
  弹性滚动：
  IOS：全局滚动：默认支持
      局部滚动：默认没有滚动条，且滚动起来干涩
      IOS局部滚动启动弹性滚动效果
      body{-webkit-overflow-scrolling:touch;}
      局部滚动的dom节点
      .scroll-el{overflow:auto;}
      建议：将属性挂在body上，可以避免很多奇怪的bug
  Android:
      定制版本较多，浏览器表现各异
      默认没有弹性滚动效果
      -webkit-overflow-scrolling:默认浏览器不支持，android上的chrome版本支持
 2 出界
            什么时候触发出界
       IOS：全局滚动：滚动带页面顶部（或底部）时继续向下（向上）滑动，就会出现
                                 局部滚动：滚动带页面顶部（或底部）时，手指离开停下，再继续向下（向上）滑动，就会出现
       IOS解决方案
            局部滚动:使用scrollFix
            if(startTopScroll<=0)
            elem.scrollTop=1;
               if(startTopScroll+elem.offsetHeight>=elem.scrollHeight)
                    elem.scrollTop=elem.scrollHeight-elem.scrollHeight-1;
                                           页面的固定区域禁止touchmove默认事件
                                全局滚动
                                           暂时没有好的解决办法，可以考虑将全局滚动改为局部滚动
                                           好消息：从IOS8开始safari的出界部分的背景色和body的背景色保持一致
       Adroid解决方案（使用全局滚动）
       
    流畅滚动的N条军规
   1 body上加上-webkit-overflow-scrolling:touch;
   2 IOS尽量使用局部滚动
   3 IOS使用scrollFix避免出界
   4 IOS下带有滚动条且position：absolute的节点不要设置背景色
   5 Android下尽量使用全局滚动
     1）尽量不用overflow：auto
     2）使用min-height:100%代替height：100%
 
3 定制软键盘样式：
   配置input节点的type类型
    电子邮件input类型：<input type="email" name="email">     
          URL input 类型：<input type="url" name="url">     
  电话号码input类型：<input type="tel" name="tel">
  数字input类型：<input type="number" name="number">
  日期input类型：<input type="date" name="date">
  时间input类型：<input type="time" name="time">
  日期和时间input类型：<input type="datetime" name="datetime">
  月份input类型：<input type="month" name="month">
  搜索input类型：<input type="search" name="search">注：用一个form包围起来，在onsubmit事件里面阻止默认行为  
             纯数字键盘：<input type="text" pattern="[0-9]*" />注：其他pattern属性值并不支持
定制软键盘行为：
             配置节点的autocapitalize=off(on)、autocorrect=off(on)属性 

IOS基本支持，Android不同系统版本不同定制版本支持情况不一样（不支持情况下，弹出默认键盘样式）