彻底解决安卓和IOS浏览器click的300ms延迟问题

首先说一下300ms延迟的由来，2004年苹果为了实现在移动端双击缩放功能，给click事件增加了300ms延迟，如果300ms内发生第二次click则判定为双击缩放页面。这一成功的解决方案得到各大浏览器厂商争相效仿。但他的弊端很快显现，在移动端click事件会降低响应速度。谷歌率先推出禁止双击缩放的属性：

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

禁止双击缩放，自然就没有了click延迟问题。

但是～但是～从IOS10开始，苹果开始允许用户强制双击缩放，上面的代码无效了……

这个问题困扰我很久，尝试过fastclick等库，效果依然不理想。最后发现touch-action属性，可以完美解决click的300ms延迟问题：

html {
  touch-action: manipulation;
}

加上meta标签可以做到更好的兼容性。

由于是设置了全局的html属性，打开Safari双击网页放下不能双击缩放了。也没有了300ms延迟。

参考文献：
https://thx.github.io/mobile/300ms-click-delay
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action