这个 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">
或
&