Viele Jahre lang haben mobile Browser eine Verzögerung von 300 bis 350 ms zwischen touchend und click angewendet, um zu sehen, ob es sich um ein doppeltes Tippen handelte, da doppeltes Tippen eine Touch-Geste zum Heranzoomen war.
Seit der ersten Version von Chrome für Android wurde diese Verzögerung aufgehoben, wenn auch das Zoomen durch Auseinander- und Zusammenziehen deaktiviert war. Das Zoomen durch Auseinander- und Zusammenziehen der Finger ist jedoch eine wichtige Bedienungshilfe. Ab Chrome 32 (2014) ist die Verzögerung für Websites, die für Mobilgeräte optimiert sind, vergangen, ohne die Zoomfunktion zu deaktivieren. Kurz darauf folgten Firefox und IE/Edge. Im März 2016 wurde eine ähnliche Lösung für iOS 9.3 eingeführt.
Der Leistungsunterschied ist enorm.
Eine Benutzeroberfläche, die sofort reagiert, bedeutet, dass Nutzende schnell auf jede Schaltfläche klicken können, ohne auf eine Antwort warten zu müssen. Weitere Informationen zu den Auswirkungen menschlicher Reaktionszeiten und der Webleistung finden Sie in unserer Einführung in RAIL.
Um die Tippverzögerung von 300 bis 350 ms zu entfernen, benötigen Sie im <head> Ihrer Seite nur Folgendes:
<meta name="viewport" content="width=device-width">
Dadurch wird die Breite des Darstellungsbereichs auf die Breite des jeweiligen Geräts festgelegt. Dies gilt allgemein als Best Practice für Websites, die für Mobilgeräte optimiert sind. Bei diesem Tag gehen Browser davon aus, dass Text auf Mobilgeräten lesbar ist, und die Funktion zum Zoomen durch Doppeltippen wurde zugunsten schnellerer Klicks eingestellt.
Wenn du diese Änderung aus irgendeinem Grund nicht vornehmen kannst, kannst du touch-action: manipulation verwenden, um denselben Effekt entweder auf der gesamten Seite oder auf bestimmte Elemente zu erzielen:
html {
touch-action: manipulation;
}
Da dieses Verfahren in Safari nicht unterstützt wird, wird das Darstellungsbereich-Tag besonders bevorzugt.
Ist der Verlust des Doppeltippens zum Zoomen ein Problem bei der Barrierefreiheit?
Nein. Das Zoomen durch Auseinander- und Zusammenziehen der Finger funktioniert weiterhin und die Betriebssystemfunktionen richten sich an Nutzer, die diese Geste als schwierig empfinden. Unter Android können Sie das über Vergrößerungsbewegungen erledigen. Solche Tools funktionieren sogar außerhalb des Browsers.
Was ist mit älteren Browsern?
FastClick von FT Labs verwendet Touch-Ereignisse, um Klicks schneller auszulösen, und entfernt das Doppeltippen. Dabei wird berücksichtigt, wie viel sich dein Finger zwischen touchstart und touchend bewegt hat, um Scrollen und Tippen zu unterscheiden.
Das Hinzufügen eines touchstart-Listeners wirkt sich auf die Leistung aus, da Interaktionen auf niedrigerer Ebene wie z. B. Scrollen verzögert werden, indem der Listener aufgerufen wird, um zu sehen, ob er event.preventDefault() ist. Glücklicherweise vermeidet FastClick das Festlegen von Listenern, wenn der Browser die Verzögerung von 300 ms bereits entfernt hat. So wird das Beste aus beidem erzielt.