Per molti anni, i browser mobile hanno applicato un ritardo di 300-350 ms tra touchend e click in attesa di capire se si trattava di un doppio tocco o meno, poiché il doppio tocco era un gesto per aumentare lo zoom del testo.
Fin dalla prima release di Chrome per Android, questo ritardo è stato rimosso se era disattivato anche lo zoom con due dita. Tuttavia, lo zoom con due dita è una funzionalità di accessibilità importante. A partire da Chrome 32 (nel 2014), questo ritardo non c'è più per i siti ottimizzati per il mobile, senza rimuovere lo zoom con due dita. Poco dopo, lo stesso è stato fatto da Firefox e IE/Edge e a marzo 2016 una correzione simile è stata implementata in iOS 9.3.
La differenza di rendimento è enorme.
Un'interfaccia utente che risponde immediatamente consente all'utente di premere rapidamente ogni pulsante in tutta sicurezza, anziché mettere in pausa e attendere una risposta. Scopri di più sull'impatto dei tempi di reazione umani e sulle prestazioni web nella nostra introduzione a RAIL.
Per rimuovere il ritardo del tocco di 300-350 ms, è sufficiente quanto segue nel <head> della pagina:
<meta name="viewport" content="width=device-width">
In questo modo, la larghezza dell'area visibile corrisponde a quella del dispositivo ed è generalmente una best practice per i siti ottimizzati per il mobile. Con questo tag, i browser presumono che tu abbia reso il testo leggibile sui dispositivi mobili e la funzionalità di zoom con doppio tocco viene eliminata a favore di clic più rapidi.
Se per qualche motivo non puoi apportare questa modifica, puoi utilizzare touch-action: manipulation per ottenere lo stesso effetto nella pagina o in elementi specifici:
html {
touch-action: manipulation;
}
Questa tecnica non è supportata in Safari, pertanto è preferibile utilizzare il tag viewport.
La perdita della funzionalità di zoom con doppio tocco rappresenta un problema di accessibilità?
No. Lo zoom con due dita continua a funzionare e le funzionalità del sistema operativo sono adatte agli utenti che trovano questo gesto difficile. Su Android, ci pensano i gesti di zoom. Strumenti come questo funzionano anche al di fuori del browser.
Che dire dei browser meno recenti?
FastClick di FT Labs utilizza gli eventi tocco per attivare i clic più rapidamente e rimuove il gesto del doppio tocco. Analizza la quantità di movimento del dito tra touchstart e touchend per distinguere scorrimenti e tocchi.
L'aggiunta di un ascoltatore touchstart a tutto ha un impatto sul rendimento, perché le interazioni di livello inferiore come lo scorrimento vengono ritardate chiamando l'ascoltatore per verificare se è event.preventDefault(). Fortunatamente, FastClick evita di impostare gli ascoltatori nei casi in cui il browser rimuove già il ritardo di 300 ms, quindi puoi ottenere il meglio da entrambi.