長年にわたり、モバイル ブラウザでは、ダブルタップがテキストをズームするジェスチャーであったため、ダブルタップかどうかを確認するために、touchend と click の間に 300 ～ 350 ミリ秒の遅延を適用していました。
Chrome for Android の最初のリリース以降、ピンチ操作によるズームも無効にすると、この遅延は解消されていました。ただし、ピンチ操作によるズームは重要なユーザー補助機能です。Chrome 32（2014 年）以降、モバイル向けに最適化されたサイトでは、ピンチ操作によるズームを削除することなく、この遅延が解消されています。Firefox と IE/Edge もその後すぐに同様の対応を行い、2016 年 3 月には iOS 9.3 でも同様の修正が適用されました。
パフォーマンスの差は非常に大きいです。
即座に応答する UI があれば、ユーザーは停止して応答を待つことなく、各ボタンをすばやく確実に押すことができます。人間の反応時間とウェブ パフォーマンスの影響について詳しくは、RAIL の概要をご覧ください。
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() かどうかを確認するためにリスナーを呼び出すことで、スクロールなどの下位レベルのインタラクションの遅延が発生するためです。FastClick では、ブラウザがすでに 300 ミリ秒の遅延を削除している場合はリスナーを設定しないため、両方のメリットを享受できます。