長い間、モバイル ブラウザは 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 の間で指が動かした量を確認します。
スクロールなどの下位レベルの操作は、リスナーを呼び出して event.preventDefault() かどうかを確認することで遅延するため、すべてに touchstart リスナーを追加するとパフォーマンスに影響します。幸いなことに、FastClick は、ブラウザがすでに 300 ミリ秒の遅延をなくしている場合にリスナーの設定を行わないため、その両方の長所を活かすことができます。