xieyezi

移动端 300ms 延迟

移动端浏览器 click 事件为什么会有 300ms 的延迟呢？因为在手机上有个双击方案：在手机上快速点击两下，实现页面放大；再次双击，恢复到原始比例。 那它是如何实现的呢？浏览器在捕捉到第一次点击事件后，会等待一段时间，如果在这段时间内，用户没有再次进行点击操作的话，就执行单击事件；如果用户进行了第二次点击操作的话，就会执行双击事件。这段等待的时间大约 300ms。 如果我们需要开发 Web APP，那我们肯定不希望有这个延迟。因为延迟会造成请求的延迟，从而降低了用户的使用体验。

如何解决？

目前我已知的有两种方法：

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

width=device-width 宽度为设备宽度 initial-scale=1 初始比例为 1 maximum-scale=1 最大比例为 1 minimum-scale=1 最小比例为 1 user-scalable=no 用户不能进行放大缩小

  1. 引入第三方库 fastclick
npm install fastclick --save

因为所有页面都要引入，所以在入口处统一引入就可以了，再将其绑定到 body 这个 dom 上即可

import fastClick from "fastclick"
fastClick.attach(document.body)