長年にわたり、モバイル ブラウザでは、ダブルタップがテキストを拡大するジェスチャーだったため、ダブルタップの対象になるかどうかを待つ間、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 ミリ秒の遅延が解消されている場合でもリスナーを設定する必要がないため、両方の長所を活かすことができます。