1.6.1 double tap to zoom
double tap to zoom (双击缩放)
当用户点击屏幕以后,浏览器不能直接判断用户是点击操作,还是双击缩放,因此浏览器的做法是等待300ms来判断用户是进行了什么操作。
交互的响应速度是移动端的用户体验的要素,专门的网站做过测试结果:交互超过100ms便认为是卡顿。
解决方案
关于解决方案网上有很多做法,总结几种亲测可用的方法。
- 禁用缩放
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>
完全禁用缩放可以快速有效的解决这个问题
- css touch-action
div{
touch-action:none|manipulation
}
如果需求要进行页面缩放 又要解决这个问题我们可以给对应的元素加上touch-action属性
FastClick.attach(document.body);
引入库文件之后只需要在页面初始化事件中应用fastclick,便可以使用,解决方案的源码大致方案是:对页面的document.body上绑定了click以及指针(touchstart,touchend,touchcancel)事件,当用户触发点击事件以后,会冒泡到document.body上,这里做的事情有两件:记录下来事件并发送自定义click事件在控件上并触发;阻止原来的点击事件。