iOS 上更灵敏的轻点

iOS 上的 WebKit 在单击激活链接或按钮之前有 350 毫秒的延迟。WebKit 之所以有此延迟，是因为我们也允许用户双击缩放，这是一种很好的方法，可以放大适合大型桌面显示器但显示在移动设备上太小的内容。然而，当用户轻点一次后，WebKit 无法判断用户是否打算再次轻点以触发双击手势。由于双击定义为在短时间间隔（350 毫秒）内进行两次轻点，因此 WebKit 必须等待此时间间隔过去，才能确定用户只打算轻点一次。

我们深知响应式轻点对网页开发者至关重要——以至于许多人愿意使用 JavaScript 框架，通过触摸处理程序来避免延迟。这些库不是等待 WebKit 在延迟后触发点击，而是阻止 touchend 事件的默认行为，并立即调用 click()，以便在用户停止触摸元素的那一刻立即点击该元素。虽然这可能会让链接感觉很快，但它也可能在其他方面降低响应速度，包括页面加载时间和滚动。为了解决这个问题，我们将快速轻点优化内置到 WebKit 中，这样，良好缩放的移动网页将能够开箱即用地实现响应式轻点，而无需第三方框架的缺点。

在为移动视口优化的网页上，链接和表单控件等元素会被缩放以适应小屏幕。因此，双击这些元素只会使页面缩放量增加很小。由于双击在这些网页上提供的价值很小，我们已经实现了一种机制，通过禁用双击手势来消除单次轻点的延迟。

以下示例显示了在包含 <meta name="viewport" content="initial-scale=1.0, width=device-width"> 的页面中，在启用和不启用快速轻点优化的情况下，轻点按钮 10 次所需的时间。左侧视频显示了旧行为，右侧视频显示了新行为。

何时应用快速轻点优化

当内容缩放以适应移动设备时，WebKit 会禁用双击，转而支持快速单次轻点。使用视口 meta 标签，WebKit 有几种方法可以确定内容是否比例良好，适用于可缩放和不可缩放的网页。

由于用户无法在不可缩放的视口中进行缩放（使用带有 user-scalable=no 或 minimum-scale 等于 maximum-scale 的 meta 标签），WebKit 假定如果页面具有不可缩放的视口，则所有内容相对于屏幕都已经比例良好。在这些页面上，WebKit 完全取消了在元素上双击的功能，并立即将所有轻点作为点击分派。我们在 Bug #149968 中实现了此行为。

然而，我们认为网页应尽可能可缩放。因此，当用户处于初始缩放比例时，具有 width=device-width 的视口将实现快速单次轻点。我们在 Bug #150604 中添加了此优化。

快速轻点行为的样式设置

即使网页无法使用上述任何一种视口配置，它仍然可以选用快速轻点优化。我们已在 Bug #149854 中实现了新的 touch-action CSS 属性的 manipulation 值。默认情况下，元素具有 touch-action: auto，这表明 WebKit 可能会启用任何触摸行为，例如平移、捏合和双击。将 touch-action: manipulation; 应用于可点击元素，会使 WebKit 仅出于平移和捏合缩放的目的考虑在该元素上开始的触摸。这意味着 WebKit 不会在该元素上考虑双击手势，因此单次轻点会立即分派。当元素的任何祖先具有 touch-action: manipulation 时，该元素上的单次轻点就会变快。请注意，在任何节点上设置 touch-action: manipulation 都会使该节点的所有子节点都采用快速轻点优化。

此外，对于具有 touch-action: manipulation 的元素，其单次轻点在所有缩放比例下都很快，而我们对设备宽度视口（device-width viewports）的优化仅在视口处于初始缩放比例时触发。

如果您对移动 Safari 中的快速轻点有疑问、评论或其他反馈，请随时通过 Twitter 联系 Jon Davis @jonathandavis 或 WebKit @webkit，或直接发送电子邮件至 wenson_hsieh@apple.com。