Viele Jahre lang haben mobile Browser eine Verzögerung von 300 bis 350 Millisekunden zwischen touchend und click angewendet, während sie warteten, um festzustellen, ob es sich um ein Doppeltippen handelte oder nicht, da ein Doppeltippen eine Geste zum Heranzoomen von Text war.
Seit der ersten Version von Chrome für Android wurde diese Verzögerung entfernt, wenn auch das Zoomen durch Zusammenziehen und Spreizen der Finger deaktiviert war. Das Zoomen per Zusammenziehen und Spreizen der Finger ist jedoch eine wichtige Bedienungshilfe. Seit Chrome 32 (2014) gibt es diese Verzögerung nicht mehr für für Mobilgeräte optimierte Websites, ohne dass das Zoomen mit den Fingern entfernt wurde. Kurz darauf folgten Firefox und IE/Edge. Im März 2016 wurde eine ähnliche Korrektur in iOS 9.3 eingeführt.
Die Leistungsunterschiede sind enorm.
Wenn die Benutzeroberfläche sofort reagiert, kann der Nutzer schnell und sicher auf jede Schaltfläche drücken, anstatt innezuhalten und auf eine Antwort zu warten. Weitere Informationen zu den Auswirkungen von menschlichen Reaktionszeiten und der Webleistung finden Sie in unserer Einführung in RAIL.
Wenn Sie die Tippverzögerung von 300–350 ms entfernen möchten, fügen Sie einfach Folgendes in die <head> Ihrer Seite ein:
<meta name="viewport" content="width=device-width">
Dadurch wird die Breite des Darstellungsbereichs auf die Breite des Geräts festgelegt. Dies ist in der Regel eine Best Practice für für Mobilgeräte optimierte Websites. Mit diesem Tag gehen Browser davon aus, dass Sie den Text für Mobilgeräte lesbar gemacht haben. Die Funktion „Zum Zoomen doppeltippen“ wird zugunsten schnellerer Klicks deaktiviert.
Wenn Sie diese Änderung aus irgendeinem Grund nicht vornehmen können, können Sie mit touch-action: manipulation denselben Effekt entweder auf der gesamten Seite oder auf bestimmten Elementen erzielen:
html {
touch-action: manipulation;
}
Diese Methode wird in Safari nicht unterstützt. Daher ist das Viewport-Tag vorzuziehen.
Ist das Entfernen der Funktion „Zum Zoomen doppeltippen“ ein Problem für die Barrierefreiheit?
Nein. Das Zoomen per Zusammenziehen und Spreizen der Finger funktioniert weiterhin. Außerdem gibt es Betriebssystemfunktionen für Nutzer, denen diese Geste schwerfällt. Unter Android werden Vergrößerungsgesten verwendet. Solche Tools funktionieren auch außerhalb des Browsers.
Was ist mit älteren Browsern?
FastClick von FT Labs verwendet Touch-Ereignisse, um Klicks schneller auszulösen, und entfernt die Geste zum Doppeltippen. Dabei wird die Entfernung betrachtet, die Ihr Finger zwischen touchstart und touchend zurückgelegt hat, um Scroll- und Tippaktionen zu unterscheiden.
Wenn Sie allen Elementen einen touchstart-Listener hinzufügen, hat das Auswirkungen auf die Leistung, da Interaktionen auf niedrigerer Ebene wie das Scrollen verzögert werden, weil der Listener aufgerufen wird, um zu prüfen, ob event.preventDefault()s. Glücklicherweise setzt FastClick keine Listener, wenn der Browser die 300-ms-Verzögerung bereits entfernt. So profitieren Sie von beiden Methoden.