解决移动设备上的300ms点击延迟

这个 300ms 为什么会被设计出来呢? 原因在于单击后面还有个双击缩放动作，这个涉及到触摸设备的手势交互行为原生设计，在平台提供商比如苹果和谷歌,本意是通过 300ms 来区分两者之间的不同行为,单击一次等待 300ms 后没有再次单击那么就会触发缩放等双击行为。本意是好的,正常的逻辑实现,但是在现实的应用场景中,用户往往会觉得 web app 的事件触发不是那么灵敏,有那么一点延迟，那么我们如何避开这个特殊的300ms呢.

1、不要太纠结于此
是否能接受这 300ms 的时间延迟，往往取决于你的应用和目标受众，比如：如果是个内容为主，并且菜单较少的应用，那么用户在阅读上花费的事件远远大于在菜单上消耗的事件，这种情况下 300ms 是完全可以接受的，并且没有 300ms 延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题，在做正确抉择。

2、禁用缩放 （chrome 和 firefox）
在 chrome 和 firefox 的移动版本中，如果禁用了页面缩放，那么着 300ms 的延迟就会自动消失，具体代码如下：

<meta name="viewport" content="width=device-width, user-scalable=no">

或

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

但是这一方案在 safari 上并不起作用，还会降低有视觉或运动障碍用户的