Jarenlang pasten mobiele browsers een vertraging van 300-350 ms toe tussen touchend en click terwijl ze wachtten om te zien of dit een dubbele tik zou zijn of niet, aangezien dubbeltikken een gebaar was om in te zoomen op tekst.
Sinds de eerste release van Chrome voor Android werd deze vertraging opgeheven als pinch-zoom ook werd uitgeschakeld. Knijpzoom is echter een belangrijke toegankelijkheidsfunctie. Vanaf Chrome 32 (in 2014) is deze vertraging verdwenen voor voor mobiel geoptimaliseerde sites, zonder het knijpenzoomen te verwijderen ! Firefox en IE/Edge deden kort daarna hetzelfde, en in maart 2016 verscheen een soortgelijke oplossing in iOS 9.3.
Het prestatieverschil is enorm!
Met een gebruikersinterface die onmiddellijk reageert, kan de gebruiker snel en met vertrouwen op elke knop drukken, in plaats van te pauzeren en op een reactie te wachten. Lees meer over de impact van menselijke reactietijden en webprestaties in onze inleiding tot RAIL .
Om de tikvertraging van 300-350 ms te verwijderen, heb je alleen het volgende nodig in de <head> van je pagina:
<meta name="viewport" content="width=device-width">
Hiermee wordt de viewportbreedte ingesteld op dezelfde als die van het apparaat, en dit is over het algemeen een best practice voor voor mobiel geoptimaliseerde sites. Met deze tag gaan browsers ervan uit dat je tekst leesbaar hebt gemaakt op mobiel, en de functie dubbeltikken om te zoomen wordt geschrapt ten gunste van snellere klikken.
Als u deze wijziging om de een of andere reden niet kunt doorvoeren, kunt u touch-action: manipulation gebruiken om hetzelfde effect op de hele pagina of op bepaalde elementen te bereiken:
html {
touch-action: manipulation;
}
Deze techniek wordt niet ondersteund in Safari , dus de viewport-tag heeft veel de voorkeur.
Is het verliezen van dubbeltikken om te zoomen een probleem met de toegankelijkheid?
Nee. Knijpzoom blijft werken en de OS-functies zijn geschikt voor gebruikers die dit gebaar moeilijk vinden. Op Android zorgen vergrotingsgebaren hiervoor. Dergelijke tools werken zelfs buiten de browser.
Hoe zit het met oudere browsers?
FastClick van FT Labs gebruikt aanraakgebeurtenissen om klikken sneller te activeren en verwijdert het dubbeltikgebaar. Er wordt gekeken naar de hoeveelheid beweging die uw vinger maakte tussen touchstart en touchend om scrollen en tikken te onderscheiden.
Het toevoegen van een touchstart listener aan alles heeft invloed op de prestaties, omdat interacties op een lager niveau, zoals scrollen, worden vertraagd door de luisteraar aan te roepen om te zien of deze event.preventDefault() s is. Gelukkig vermijdt FastClick het instellen van luisteraars in gevallen waarin de browser de vertraging van 300 ms al verwijdert, zodat je het beste van beide krijgt!