Przez wiele lat przeglądarki mobilne stosowały opóźnienie 300–350 ms między touchend i click, aby sprawdzić, czy nastąpiło dwukrotne kliknięcie, ponieważ dwukrotne kliknięcie było gestem służącym do powiększania tekstu.
Od czasu pierwszej wersji Chrome na Androida to opóźnienie zostało usunięte, jeśli wyłączono też powiększanie za pomocą 2 palców. Jednak powiększanie za pomocą 2 palców to ważna funkcja ułatwień dostępu. Od wersji 32 Chrome (w 2014 r.) opóźnienie zostało usunięte w przypadku witryn zoptymalizowanych pod kątem urządzeń mobilnych, bez usuwania funkcji powiększania za pomocą gestów. Wkrótce potem Firefox i IE/Edge zrobiły to samo, a w marcu 2016 r. podobna poprawka została wprowadzona w iOS 9.3.
Różnica w wydajności jest ogromna.
Interfejs, który reaguje natychmiast, oznacza, że użytkownik może szybko i bez obaw naciskać przyciski, zamiast wstrzymywać się i czekać na odpowiedź. Więcej informacji o wpływie czasu reakcji człowieka i wydajności witryny znajdziesz w wprowadzeniu do RAIL.
Aby usunąć opóźnienie kliknięcia na poziomie 300–350 ms, wystarczy, że w <head> strony umieścisz następujące elementy:
<meta name="viewport" content="width=device-width">
Spowoduje to ustawienie szerokości widocznego obszaru na poziomie szerokości ekranu urządzenia. Jest to ogólnie zalecana praktyka w przypadku witryn zoptymalizowanych pod kątem urządzeń mobilnych. Dzięki temu tagowi przeglądarki uznają, że tekst jest czytelny na urządzeniach mobilnych, a funkcja powiększania przez dwukrotne dotknięcie jest zastępowana szybszym kliknięciem.
Jeśli z jakiegoś powodu nie możesz wprowadzić tej zmiany, możesz użyć touch-action: manipulation, aby uzyskać ten sam efekt na całej stronie lub w przypadku poszczególnych elementów:
html {
touch-action: manipulation;
}
Ta technika nie jest obsługiwana w Safari, dlatego zalecamy używanie znacznika widoku.
Czy utrata funkcji powiększania przez dwukrotne kliknięcie jest problemem związanym z ułatwieniami dostępu?
Nie. Funkcja powiększania za pomocą dwóch palców nadal działa, a funkcje systemu operacyjnego są przystosowane do użytkowników, którym trudno jest wykonywać ten gest. Na Androidzie wystarczają gesty powiększania. Takie narzędzia działają nawet poza przeglądarką.
A co ze starszymi przeglądarkami?
FastClick firmy FT Labs używa zdarzeń dotykowych, aby szybciej wywoływać kliknięcia, i eliminuje gest podwójnego dotknięcia. Aby odróżnić przewijanie od dotykania, sprawdza, jaką odległość przebył palec między touchstart a touchend.
Dodanie do wszystkiego listenera touchstart ma wpływ na wydajność, ponieważ wywołanie listenera w celu sprawdzenia, czy jest on event.preventDefault(), opóźnia interakcje na niższym poziomie, takie jak przewijanie. Na szczęście FastClick nie ustawia słuchaczy w przypadkach, gdy przeglądarka już usuwa opóźnienie 300 ms, więc możesz korzystać z najlepszych cech obu rozwiązań.