多年来,由于点按两次是一种放大文本的手势,因此移动浏览器在等待过程中会在 touchend
和 click
之间应用 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 使用触摸事件更快地触发点击,并移除点按两次手势。它关注的是手指在 touchstart
和 touchend
之间移动的量,以区分滚动操作和点按操作。
向所有内容添加 touchstart
监听器会影响性能,因为滚动等较低级别的互动会通过调用监听器来查看它是否 event.preventDefault()
进行延迟。幸运的是,在浏览器已经消除了 300 毫秒的延迟的情况下,FastClick 可避免设置监听器,因此您可以两全其美!