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