解决移动端的300ms延迟

最近做移动端，想起之前见过这个问题，于是在项目里汇总也一并解决掉

为什么会有300ms延迟

300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。

因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。

解决方案

• 第三方插件解决法：fastclick GitHub

  • 这个插件不但可以解决300ms还能解决移动端点击穿透的问题
  • 【好】第三方一次性解决，不需要在自行配置
  • 【弊】第三方的插件包的引入，则是一个新的静态资源的加载，在乎性能的则会认为是弊

• 添加viewpoint meta标签

  • 表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
  • 【好】浏览器配置直接解决
  • 【弊】直接关闭了缩放

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

• 更改默认的视口宽度
  • 新的属性，对于做了适配的手机端加上之后，浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。
  • 【好】好！
  • 【弊】完美方案好么~

<meta name="viewport" content="width=device-width">

什么是点击穿透？

• 上面遇到了一个关键字叫点击穿透：
  • 在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。