Przez wiele lat przeglądarki mobilne stosowały opóźnienie 300–350 ms między touchend a click w czasie oczekiwania na sprawdzenie, czy to dwukrotne dotknięcie, ponieważ było to gestem powiększania tekstu.
Od pierwszej wersji Chrome na Androida opóźnienie nie było widoczne, jeśli wyłączono też powiększanie przez ściąganie palców. Powiększanie przez ściąganie palców to jednak ważna funkcja ułatwień dostępu. W Chrome 32 (w 2014 r.) opóźnienie nie jest już dostępne w przypadku witryn zoptymalizowanych pod kątem urządzeń mobilnych – bez usuwania powiększania przez ściąganie palców. W przeglądarkach Firefox i IE/Edge wkrótce pojawiło się to samo. Podobna poprawka pojawiła się w marcu 2016 roku w iOS 9.3.
Różnica w wydajności jest ogromna.
Dzięki interfejsowi, który reaguje na bieżąco, użytkownik może bez obaw nacisnąć każdy przycisk szybko, bez wstrzymywania i czekania na odpowiedź. Więcej informacji o wpływie ludzkiego czasu reakcji i na wydajność stron internetowych znajdziesz we wprowadzeniu do RAIL.
Aby usunąć opóźnienie kliknięcia wynoszące 300–350 ms, wystarczy, że w <head> na stronie znajdziesz te informacje:
<meta name="viewport" content="width=device-width">
Szerokość widocznego obszaru jest taka sama jak na urządzeniu. Zazwyczaj jest to sprawdzona metoda w przypadku witryn zoptymalizowanych pod kątem urządzeń mobilnych. Zastosowanie tego tagu powoduje, że przeglądarki zakładają, że tekst jest czytelny na urządzeniach mobilnych, a funkcja dwukrotnego dotknięcia w celu powiększenia go zastępuje szybsze kliknięcia.
Jeśli z jakiegoś powodu nie możesz wprowadzić tej zmiany, możesz użyć touch-action: manipulation, aby uzyskać taki sam efekt na stronie lub na konkretnych elementach:
html {
touch-action: manipulation;
}
Ta metoda nie jest obsługiwana w przeglądarce Safari, dlatego zalecamy użycie tagu widocznego obszaru.
Czy utrata powiększenia przez dotknięcie to problem z ułatwieniami dostępu?
Nie. Powiększanie przez ściąganie palców nadal działa, a funkcje systemu operacyjnego są przeznaczone dla użytkowników, którym ten gest sprawia trudność. Na Androidzie można to zrobić za pomocą gestów powiększenia. Takie narzędzia działają nawet poza przeglądarką.
Co ze starszymi przeglądarkami?
FastClick firmy FT Labs wykorzystuje zdarzenia dotykowe do szybszego uruchamiania kliknięć i usuwa gest dwukrotnego dotknięcia. Ta funkcja sprawdza ilość przesuniętego palcem w okresie od touchstart do touchend, aby rozróżnić przewinięcia i kliknięcia.
Dodanie detektora touchstart do wszystkich elementów wpływa na wydajność, ponieważ interakcje niższego poziomu, takie jak przewijanie, są opóźnione przez wywołanie detektora w celu sprawdzenia, czy event.preventDefault()s. Na szczęście FastClick nie ustawia detektorów w przypadkach, gdy przeglądarka usuwa już opóźnienie 300 ms, więc możesz korzystać z obu rozwiązań.