Durante muchos años, los navegadores para dispositivos móviles aplicaron un retraso de 300 a 350 ms entre touchend y click mientras esperaban para ver si iba a presionar dos veces o no, ya que presionar dos veces era un gesto para hacer zoom en el texto.
Desde la primera versión de Chrome para Android, esta demora se eliminó si también se inhabilitaba la función de pellizcar para hacer zoom. Sin embargo, pellizcar el zoom es una función de accesibilidad importante. A partir de Chrome 32 (en 2014), este retraso ya no está para los sitios optimizados para dispositivos móviles, sin quitar la función de pellizcar para hacer zoom. Firefox e IE/Edge hicieron lo mismo poco después y, en marzo de 2016, llegó una solución similar en iOS 9.3.
La diferencia en el rendimiento es enorme.
Tener una IU que responde de inmediato significa que el usuario puede presionar rápidamente cada botón con confianza, en lugar de hacer una pausa 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 la presión, solo necesitarás lo siguiente en la <head> de tu página:
<meta name="viewport" content="width=device-width">
De esta manera, el ancho de la vista del puerto será el mismo que el del dispositivo y, por lo general, se recomienda el uso de sitios optimizados para dispositivos móviles. Con esta etiqueta, los navegadores suponen que el texto se puede leer en dispositivos móviles, y la función de presionar dos veces para acercar se descarta para priorizar los clics más rápidos.
Si por alguna razón no puedes realizar este cambio, usa 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 se admite en Safari, por lo que se prefiere la etiqueta de viewport.
¿Perder el gesto de presionar dos veces para acercar es un problema de accesibilidad?
No. El zoom de pellizco sigue funcionando, y las funciones del SO se adaptan a los usuarios que tienen dificultades con este gesto. En Android, los gestos de ampliación se encargan de esto. Este tipo de herramientas incluso funcionan fuera del navegador.
¿Qué ocurre con los navegadores anteriores?
FastClick de FT Labs usa eventos táctiles para activar los clics más rápido y quita el gesto de presionar dos veces. Observa la cantidad de veces que se movió el dedo entre touchstart y touchend para diferenciar los desplazamientos y las presiones.
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(). Afortunadamente, FastClick evitará configurar objetos de escucha en casos en los que el navegador ya quite el retraso de 300 ms, así que obtienes lo mejor de ambos.