移动端遇到的问题

1. 伪类 :active 生效

要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件

<script>
  document.addEventListener('touchstart',function(){},false);
</script>

2. JS 事件相关

click 事件普遍 300ms 的延迟 在手机上绑定 click 事件，会使得操作有 300ms 的延迟，体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替 click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成

3. 不让 Android 手机识别邮箱

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

4. 禁止 iOS 识别长串数字为电话

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

5. setTimeout优化

比如要绑定一个 touchmove 的事件，正常的情况下类似这样

$('div').on('touchmove', function(){
   //.….code
});

而如果中间的 code 需要处理的东西多的话，FPS 就会下降影响程序顺滑度，而如果改成这样

$('div').on('touchmove', function(){
   setTimeout(function(){
     //.….code
   },0);
});

把代码放在 setTimeout 中，会发现程序变快.

6. Android平台遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)

问题发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change. bug issue ，在查看bug报告list以后，找到了两种解决方案，第一是通过层显示以后加入对应的class名控制，第二是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）

7. 部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为

#Search::-webkit-search-cancel-button{
    display: none;    
}

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

8. 唤起select的option展开

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    sltElement.dispatchEvent(event);
};

9. 移动端 HTML5 input date 不支持 placeholder 问题

先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 datepicker 功能。

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">