设计方案--移动端延迟300ms的原因以及解决方案

一、前言

移动端浏览器提供一个特殊的功能：双击(double tap)缩放。

 

二、移动端延迟300ms的原因

为什么要用触摸事件？触摸事件是移动端浏览器特有的html5事件。

因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提高页面响应速度，带来更好的用户体验。

重点：由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。

 

三、浏览器开发商的解决方案

1、方案一：禁用缩放

当HTML文档头部包含如下meta标签时：

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

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点：就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

 

2、方案二：更改默认的视口窗口

为了让桌面站点能在移动端浏览器正常显示，移动端浏览器默认的视口宽度！=设备浏览器视窗宽度，而是视口宽度要比设备宽度大，通常是980px。

我们可以通过以下标签来设置视口宽度为设备宽度。

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