Pendant de nombreuses années, les navigateurs mobiles ont appliqué un délai de 300 à 350 ms entre le touchend et le click, le temps d'attendre de voir s'il s'agissait d'appuyer deux fois ou non, car ce dernier était un geste permettant de zoomer sur le texte.
Depuis la première version de Chrome pour Android, ce délai a été supprimé si le pincement était également désactivé. Toutefois, pincer et zoomer est une fonctionnalité d'accessibilité importante. À partir de Chrome 32 (en 2014), ce retard a disparu pour les sites optimisés pour les mobiles, sans supprimer le zoom par pincement. Peu de temps après, Firefox et IE/Edge ont fait de même, et en mars 2016, un correctif similaire a été introduit dans iOS 9.3.
La différence de performances est énorme.
Avec une interface utilisateur qui répond instantanément, l'utilisateur peut appuyer rapidement sur chaque bouton en toute confiance, sans s'arrêter et attendre une réponse. Pour en savoir plus sur l'impact des temps de réaction humains et sur les performances Web, consultez notre guide Présentation de la RAIL.
Pour supprimer le délai d'appui de 300 à 350 ms, il vous suffit d'effectuer les opérations suivantes dans le <head> de votre page:
<meta name="viewport" content="width=device-width">
La largeur de la fenêtre d'affichage est alors identique à celle de l'appareil. Il s'agit généralement d'une bonne pratique pour les sites optimisés pour les mobiles. Avec cette balise, les navigateurs supposent que le texte est désormais lisible sur les mobiles. La fonctionnalité "Appuyer deux fois pour zoomer" est abandonnée au profit de clics plus rapides.
Si, pour une raison quelconque, vous ne pouvez pas effectuer cette modification, vous pouvez utiliser touch-action: manipulation pour obtenir le même effet sur l'ensemble de la page ou sur des éléments particuliers:
html {
touch-action: manipulation;
}
Cette technique n'est pas acceptée dans Safari. Il est donc préférable d'utiliser la balise de fenêtre d'affichage.
Est-ce que le fait de ne plus pouvoir appuyer deux fois pour zoomer est un problème d'accessibilité ?
Non. Le zoom par pincement continue de fonctionner, et les fonctionnalités du système d'exploitation s'adressent aux utilisateurs qui éprouvent des difficultés à effectuer ce geste. Sur Android, les gestes d'agrandissement s'en chargent. Ces outils fonctionnent même en dehors du navigateur.
Qu'en est-il des navigateurs plus anciens ?
FastClick by FT Labs utilise les événements tactiles pour déclencher les clics plus rapidement et supprime le double tapotement. Elle analyse la quantité de mouvements de votre doigt entre touchstart et touchend pour différencier les actions de défilement et d'appui.
L'ajout d'un écouteur touchstart à tout a un impact sur les performances, car les interactions de niveau inférieur telles que le défilement sont retardées en appelant l'écouteur pour voir s'il est event.preventDefault(). Heureusement, FastClick évite de définir des écouteurs dans les cas où le navigateur supprime déjà le délai de 300 ms, ce qui vous permet de tirer le meilleur parti des deux.