背景:double tap to zoom

当用户点击屏幕以后,浏览器不能直接判断用户是点击操作,仍是双击缩放,因此浏览器的做法是等候300ms来判断用户是进行了什么操作。

响应速度是移动端用户体验的重要因素,超越100ms便认为是卡顿。

解决方案:

一、Fastclick

// FastClick运用十分简略
window.addEventListener('load'.function(){
    FastClick.attach(document.body);
},false);

fastclick原理

  • 监听touchend事情(touchstart touchend会优先于click触发)
  • 运用自定义DOM事情模仿一个click事情
  • 把默认的click事情(300ms之后触发的)制止掉

二、width = device-width

现代浏览器做了一些改进

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" >
    <title>title</title>
</head>

三、制止缩放

<head>
    <meta name="viewport" content="user-scalable=no,initial-scale=1.0" >
    <title>title</title>
</head>