Durante muchos años, los navegadores para dispositivos móviles aplicaron una demora de entre 300 y 350 ms entre touchend y click mientras esperaban para ver si se trataba de una presión doble o no, ya que este gesto se usaba para acercar el texto.
Desde la primera versión de Chrome para Android, se quitó esta demora si también se inhabilitaba el zoom con pellizco. Sin embargo, el zoom con pellizco es una función de accesibilidad importante. A partir de Chrome 32 (en 2014), este retraso ya no existe para los sitios optimizados para dispositivos móviles, sin quitar el zoom con pellizco. Firefox, IE y Edge hicieron lo mismo poco después, y en marzo de 2016, se implementó una corrección similar en iOS 9.3.
La diferencia de rendimiento es enorme.
Tener una IU que responda de forma instantánea significa que el usuario puede presionar rápidamente cada botón con confianza, en lugar de detenerse y esperar una respuesta. Obtén más información sobre el impacto de los tiempos de reacción humanos y el rendimiento web en nuestra introducción a RAIL.
Para quitar la demora de 300 a 350 ms en el toque, solo necesitas lo siguiente en el <head> de tu página:
<meta name="viewport" content="width=device-width">
Esto establece el ancho del viewport igual que el del dispositivo y, por lo general, es una práctica recomendada para los sitios optimizados para dispositivos móviles. Con esta etiqueta, los navegadores suponen que hiciste el texto legible en dispositivos móviles y se descarta la función de presionar dos veces para acercar en favor de clics más rápidos.
Si por algún motivo no puedes realizar este cambio, puedes usar touch-action: manipulation para lograr el mismo efecto en toda la página o en elementos específicos:
html {
touch-action: manipulation;
}
Esta técnica no es compatible con Safari, por lo que se prefiere la etiqueta de viewport.
¿Perder la función de acercar con dos toques es un problema de accesibilidad?
No. El zoom con pellizco sigue funcionando, y las funciones del SO se adaptan a los usuarios que encuentran este gesto difícil. En Android, los gestos de magnificación se encargan de ello. Estas herramientas incluso funcionan fuera del navegador.
¿Qué sucede con los navegadores más antiguos?
FastClick de FT Labs usa eventos táctiles para activar los clics más rápido y quitar el gesto de doble toque. Observa la cantidad que se movió tu dedo entre touchstart y touchend para diferenciar los deslizamientos y los toques.
Agregar un objeto de escucha touchstart a todo tiene un impacto en el rendimiento, ya que las interacciones de nivel inferior, como el desplazamiento, se retrasan cuando se llama al objeto de escucha para ver si event.preventDefault(). Por suerte, FastClick evitará configurar objetos de escucha en los casos en que el navegador ya quite la demora de 300 ms, por lo que obtendrás lo mejor de ambos.