Per molti anni, i browser per dispositivi mobili hanno applicato un ritardo di 300-350 ms tra le ore touchend e le ore click mentre aspettavano di vedere se si sarebbe trattato di un doppio tocco, dato che il doppio tocco era un gesto per ingrandire il testo.
Sin dalla prima release di Chrome per Android, questo ritardo è stato rimosso se anche lo zoom tramite pizzico era disattivato. Tuttavia, pizzicare lo zoom è un'importante funzione di accessibilità. A partire da Chrome 32 (nel 2014), questo ritardo è scomparso per i siti ottimizzati per i dispositivi mobili, senza dover rimuovere lo zoom tramite pizzico. Firefox e IE/Edge hanno fatto lo stesso poco dopo e nel marzo 2016 una correzione simile è arrivata su iOS 9.3.
La differenza in termini di rendimento è enorme.
Grazie a un'interfaccia utente che risponde istantaneamente, l'utente può premere rapidamente ogni pulsante in tutta sicurezza, invece di fare una 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 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 viene impostata sullo stesso valore del dispositivo e generalmente è una best practice per i siti ottimizzati per dispositivi mobili. Con questo tag, i browser presuppongono che il testo sia stato reso leggibile sui dispositivi mobili e la funzione di doppio tocco per eseguire lo zoom viene meno a favore di clic più rapidi.
Se per qualche motivo non è possibile apportare questa modifica, puoi utilizzare touch-action: manipulation per ottenere lo stesso effetto su tutta la pagina o su determinati elementi:
html {
touch-action: manipulation;
}
Questa tecnica non è supportata in Safari, quindi è preferibile utilizzare il tag dell'area visibile.
La perdita del doppio tocco per eseguire lo zoom è un problema di accessibilità?
No. Lo zoom tramite pizzicatura continua a funzionare e le funzionalità del sistema operativo sono adatte agli utenti che trovano difficile questo gesto. Su Android, è possibile usare i gesti di ingrandimento. Strumenti come questo funzionano anche al di fuori del browser.
Cosa succede ai browser meno recenti?
FastClick di FT Labs utilizza gli eventi tocco per attivare più rapidamente i clic e rimuovere il gesto del doppio tocco. Controlla la quantità di movimento del dito tra touchstart e touchend per distinguere gli scorrimenti e i tocchi.
L'aggiunta di un listener touchstart a tutto influisce sulle prestazioni, perché le interazioni di livello inferiore, come lo scorrimento, vengono ritardate chiamando il listener per verificare se event.preventDefault(). Per fortuna, FastClick eviterà di impostare listener nei casi in cui il browser rimuova già il ritardo di 300 ms, in modo da ottenere il meglio di entrambi.