300 毫秒点按延迟,已消失

Jake Archibald
Jake Archibald

多年来,由于点按两次是一种放大文本的手势,因此移动浏览器在等待过程中会在 touchendclick 之间应用 300-350 毫秒的延迟,以判断是否会执行“点按两次”操作。

自从 Chrome(Android 版)的第一个版本发布以来,如果同时停用双指张合缩放功能,则此延迟就会消失。不过,双指张合缩放是一项重要的无障碍功能。从 Chrome 32(2014 年推出)起,针对移动设备进行了优化的网站没有消除双指张合缩放方面的延迟!之后不久,Firefox 和 IE/Edge 也采取了相同的措施,并在 2016 年 3 月针对 iOS 9.3 推出了类似的修复方案。

性能差异巨大!

拥有即时响应的界面意味着用户可以放心地快速按下每个按钮,而不是暂停并等待响应。请参阅 RAIL 简介,详细了解人工反应时间和 Web 性能的影响。

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

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

这会将视口宽度设置为与设备一样,这通常是针对移动设备进行了优化的网站的最佳做法。有了这个标记,浏览器就会假设您已经让文字在移动设备上清晰易读,为了提升点击速度,“点按两次进行缩放”功能也不再可用。

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

html {
    touch-action: manipulation;
}

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

无法使用“点按两次进行缩放”功能是否会影响无障碍功能?

不需要。双指张合缩放功能仍然可用,而 OS 的功能则旨在满足难以这种手势的用户的需求。在 Android 中,放大手势可以处理放大功能。即使不借助浏览器也能使用这类工具。

旧版浏览器会怎么样?

FT Labs 的 FastClick 使用触摸事件更快地触发点击,并移除点按两次手势。它关注的是手指在 touchstarttouchend 之间移动的量,以区分滚动操作和点按操作。

向所有内容添加 touchstart 监听器会影响性能,因为滚动等较低级别的互动会通过调用监听器来查看它是否 event.preventDefault() 进行延迟。幸运的是,在浏览器已经消除了 300 毫秒的延迟的情况下,FastClick 可避免设置监听器,因此您可以两全其美!