webkit 之 fast-tap 以及 viewport 缩放

总所周知，用户在 tap 后，可能会进行第二次的 tap，浏览器在等待第二次的 tap 是否会发生，从而判断这是一个单击事件还是双击事件，做相应的处理，这就是 tap 事件会延迟的原因。双击的定义是不超过 350 ms 的两次点击，这也是为什么 tap 事件的延迟恰好是300 ms左右。虽然只有300ms，但多多少少会影响体验，github 上有 fastClick 的库专门解决这个问题，本人没有用过，但是大概猜到可能是使用 touch 事件去处理 tap 。浏览器是在不断发展的，针对这个问题早在15 年 webkit 就提出过解决方式，随着 ios 10 的发布又做了细微的调整，具体如下：

如果你听说过使用 user-scalable=no 或者把 minimum-scale 和 maximum-scale 设置成相同的值开启 fast-tap 的方法，但是 ios 10 开始也许行不通了。

fast-tap 自动生效

在 ios 10 以及以上 safari 开启 fast-tap 必须满足下面的条件

• 必须 包含 viewport 的 meta 标签
• viewport 必须 定义成 width=device-width
• 内容的 scale 值是 1， 这意味着：
  1. 没有手动放大页面，（可以放大，但是最终要回到初始的 scale）
  2. 页面不会太宽，这样浏览器不会压缩去显示

使用样式使得 fast-tap 生效

如果网页不能满足上述条件，你还可以手动的使得 fast-tap 生效。 css 中有个属性 touch-action，默认值为 auto， 这意味着 Webkit 会在元素上接受一些手势，比如 panning、 pinching 以及 double-tapping。但在一个可点击的元素把 touch-action 设置成 manipulation ，这会让 Webkit 认为在这些元素上的点击仅仅只是用来 panning、pinching， 这意味着 Webkit 不会认为 double-tap 会发生在这些元素上，所以可以立即触发单次的 tap。任何元素如果它的祖先元素设置了 touch-action: manipulation 都可以让它单次 tap 触发变快。

补充说明的是，如果一个元素拥有 touch-action: manipulation ，那在任何 zoom scale 的情况下，fast-tap 都会有效。而使用 device-width 自动开启时，仅当 viewport 在 initial scale 才有效。

ignoresViewportScaleLimits 禁止缩放

你也许听说过可以使用 user-scalable=no 或者把 minimum-scale 和 maximum-scale 设置成相同的值开启 fast-tap，这个在 ios 10 开始不一定行的通了，准确说在 safari 里面做不到。

因为这样做会使得用户不能放大缩小页面，而 webkit 本意是不建议禁止缩放功能的，因为当文字太小时候，如果不给用户一个放大文字的操作是不友好的。而之所以可能出现文字太小是因为有太多尺寸太多不同 ratio 的屏幕，在设计上使用一个适合全部设备的文字尺寸是非常困难的。

在 WKWebViewConfiguration 上有个新的 api 叫 ignoresViewportScaleLimits。这个属性默认是 false ，表现和没有这个 api 的老版本的 webview 保持一致，即不会阻止用户禁用缩放。

但是 ios 10 的 safari 设置成了 true，即禁止用户限制缩放功能。这意味着 user-scalable=no 或者把 minimum-scale 和 maximum-scale 设置成相同的值是没有办法禁止掉缩放。

但是在微信浏览器里面，笔者用 demo 页发现，微信浏览器没有刻意去改变 ignoresViewportScaleLimits 的默认值，所以微信里面可以禁止用户使用手势进行缩放。

写在最后的总结，就是在 ios 10 起 safari 里面仅仅只能用 viewport 'width=device-width' 或者 css 开启 fast-tap，但是在其他的 web 容器里面（比如微信），如果 ignoresViewportScaleLimits 设置为 false，你还可以使用禁止缩放 viewport 来开启。

参考 ：https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ ,
https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/