移动端300ms延迟的解决方法

方法一：禁止缩放（在meta标签中设置） Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>

页面不可缩放，这样双击缩放功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点：必须完全禁用缩放来达到目的，但是通常情况下，我们还是希望能通过双指来进行缩放的

方法二：更改默认的视口宽度（在meta标签中设置） Chorm和Firfox支持，Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="width=device-width"/>

如果能识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁止双击缩放行为并去掉300ms的点击延迟。

设置上述的meta标签，那么浏览器就可以认为网站已经对移动端做过适配优化，就无需双击操作。

好处：没有完全禁用缩放，而是禁用浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

方法三：css touch-action IE支持

touch-action：指定相应的元素上能够触发的用户代理（浏览器）的默认行为。

将该属性值设置为touch-action：none，那么表示在该元素上操作不会触发用户代理的任何默认行为。就无需进行300ms的延迟判断了。

方法四：FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库。

原理：在检测到touchend事件的时候，会通过DOM自定义事件立即发出模拟一个click事件，并把300ms之后发出的click事件阻止掉。