300 毫秒点按延迟,已消失

Jake Archibald
Jake Archibald

多年来,移动浏览器在 touchendclick 之间应用了 300-350 毫秒的延迟,以等待确定是否要执行双击操作,因为双击是用于放大文本的手势。

自 Android 版 Chrome 首次发布以来,如果同时停用了双指张合缩放功能,系统就会移除此延迟。不过,双指张合缩放是一项重要的无障碍功能。从 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 会避免设置监听器,这样您就可以同时兼得两者的好处!