300 毫秒点按延迟,已消失

杰克·阿奇博尔德
Jake Archibald

多年来,由于点按两次是放大文字的手势,因此在等待查看是否会发生点按两次的操作时,移动浏览器会在 touchendclick 之间应用 300-350 毫秒的延迟。

自 Chrome(Android 版)的第一个版本发布以来,如果同时停用了双指张合缩放功能,此延迟就会移除。不过,双指张合缩放是一项重要的无障碍功能。从 Chrome 32(早在 2014 年)开始,针对移动设备进行了优化的网站已没有了这种延迟,而且无需减少双指张合缩放功能!不久之后,Firefox 和 IE/Edge 执行了相同的操作,2016 年 3 月,在 iOS 9.3 中推出了一个类似的修复。

效果差别巨大!

拥有即时响应的界面意味着用户可以充满信心地快速按下每个按钮,而无需暂停并等待响应。请参阅我们的 RAIL 简介,详细了解人类反应时间和网页性能的影响。

如需消除 300-350 毫秒的点按延迟,您只需在网页的 <head> 中添加以下代码即可:

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

这会将视口宽度设为与设备相同的宽度,通常适合针对移动设备进行了优化的网站。添加此标记后,浏览器会假定您已在移动设备上设置文本可读,而系统取消了点按两次缩放功能以提升点击速度。

如果由于某种原因您无法进行此项更改,可以使用 touch-action: manipulation 在整个网页或特定元素上实现相同的效果:

html {
    touch-action: manipulation;
}

Safari 不支持此方法,因此最好使用视口标记。

无法点按两次进行缩放是无障碍功能问题吗?

不会。双指张合缩放功能仍然有效,并且操作系统功能可以满足难以执行此手势的用户的需求。在 Android 设备上,这一操作由放大手势负责。此类工具甚至可以不在浏览器内运行。

能否使用旧版浏览器?

FT Labs 推出的 FastClick 使用触摸事件更快地触发点击,并移除了点按两次手势。它会根据您的手指在 touchstarttouchend 之间的移动量来区分滚动次数和点按操作次数。

向所有内容添加 touchstart 监听器会对性能产生影响,因为系统会通过调用监听器来查看其是否 event.preventDefault(),从而延迟较低级别的互动(例如滚动)。所幸的是,如果浏览器已经消除了 300 毫秒的延迟,FastClick 会避免设置监听器,这样您就可以实现两全其美!