彻底解决安卓和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

上一篇:记录 TypeError: render() got an unexpected keyword argument 'renderer' 错误


下一篇:java – Android – 渲染线程内的结束活动