移动端点击300ms延迟问题

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事件阻止掉。