1、问题来源
移动端浏览器会有一些默认行为，比如双击缩放、双击滚动。当用户一次点击屏幕之后，浏览器并不能判断用户是要单击还是双击，因此就会等待300ms，以判断用户是否再次双击屏幕。之前人们可能不会care这300ms的延迟，但是随着用户对体验的要求越来越高，这300ms的卡顿会让人体验很差。
2、解决
浏览器开发商的解决方案
①禁止缩放
当HTML文档头部包含如下meta标签时,表明这个页面是不可缩放的，那双击就失去了意义。
<meta name = "viewport" content = "user-scalable=no">
<meta name = "viewport" content = "initial-scale=1,maximum-scale = 1">
缺点：对于不同浏览器不能提供很好的兼容；完全禁止缩放
②更改默认的视口宽度
<meta name = "viewport" content = "width=device-width">
如果设置了以上meta标签，那么浏览器认为该网站已经对移动端做过适配和优化，移动端浏览器就可以自动禁止默认的双击缩放行为并去掉300ms延迟。
相对方案1的好处，没有完全禁用缩放，只是禁用浏览器默认的双击缩放行为
缺点：对于不同浏览器不能提供很好的兼容
③CSS touch-action
将touch-action的属性值设为none，那么表示该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。
缺点：禁止了所有默认行为；并且除IE外，其他浏览器的支持并不完善
现有的解决方案
①指针事件的polyfill
现在除了IE，其他大部分浏览器都还不支持指针事件。
与300ms延迟相关的CSS属性touch-action。由于除了IE之外的大部分浏览器不支持这个新的CSS属性，所以这些指针事件的ployfill必须通过某些方式去模拟支持支持这个属性：
- JS去请求解析所有的样式表
- 将touch-action作为html标签的属性
②FastClick
专门解决移动端浏览器300ms延迟问题的一个轻量级的库。
原理：检测到touchend事件的时候，会通知DOM自定义事件立即触发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。