移动端兼容性处理方案

1. IOS移动端click事件300ms的延迟响应

在IOS safar浏览器中，触发click事件，网页往往无法立即执行，会有300ms的延迟时间。

影响：IOS safar浏览器

解决方法：
1.fastclick可以解决在手机上点击事件的300ms延迟
2.zepto的touch模块，tap事件也是为了解决在click的延迟问题
3.也可以绑定touchstart或touchend触屏事件，加快对事件的响应，解决300ms延迟问题

2. 移动端 HTML5 audio autoplay 失效问题

由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

    document.addEventListener('touchstart', function () {
        document.getElementsByTagName('audio')[0].play();
        document.getElementsByTagName('audio')[0].pause();
    });

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

iPhone手机上的浏览器（如Safari），在解析网页的时候会自动给 像是电话号码的数字 加上link样式。
可以添加下面的meta禁用掉这个功能。
在head里加上

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

4. 禁止IOS中长按链接与图片弹出菜单

a, img {
    -webkit-touch-callout: none; 
}

##5. Fixed定位错误 浮动（固定）的元素，在浏览器窗口大小改变（输入键盘弹出关闭），交互时，定位属性会变得异常。位置错位或者消失等等。 影响： 所有移动浏览器 解决方法： 1. 复杂交互页面尽量避免fixed元素。 2. 在input元素页面，禁止使用fixed元素。 3. 可用iScroll插件解决这个问题、

6. 禁止ios和android用户选中文字

html, body {
 -webkit-user-select: none;  
  user-select: none;
}

7. Video全屏Zindex失效

zindex无效，视频video始终在最上方。

影响：
很多国内浏览器不兼容

解放方法：
设计时避免视频元素与其他元素可能会出现的重叠问题。

8. IOS里点击select标签,浏览器会退出

当select里没有option标签的时候,用户点击select,浏览器会强制退出。

影响：IOS系统的浏览器

解决方法：
在select里加入option元素,保证有元素存在。

9. ios下取消input在输入的时候英文首字母的默认大写

input autocapitalize=”off” autocorrect=”off”

10. iOS Safari 委托事件绑定在document的事件失效

Safari浏览器下对document进行委托事件的绑定，会失效。

影响：
Safari 对click事件定义只能冒泡到body下面的子节点，所以委托在document上得click事件不会被触发。

解决方法：
为body的子节点添加click事件可以解决。

11. Android中元素被点击时产生边框

点击一个链接，会出现一个边框或者半透明灰色遮罩。

影响：
android手机

解决方法：
设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果。

12. 去除移动端输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭。

影响：
ios系统的手机

解决方法：

    input,textarea {
    　　border: 0; /* 方法1 */
    　　-webkit-appearance: none; /* 方法2 */
    }