Przez wiele lat w przeglądarkach mobilnych występowało 300–350 ms opóźnienia między touchend a click w czasie oczekiwania na sprawdzenie, czy będzie to dwukrotne dotknięcie, ponieważ dwukrotne dotknięcie było gestem powiększenia tekstu.
Od momentu wydania pierwszej wersji Chrome na Androida opóźnienie to było usuwane, jeśli ściąganie palców też było wyłączone. Należy jednak pamiętać, że powiększanie przez ściąganie palców to ważna funkcja ułatwień dostępu. Od wersji Chrome 32 (począwszy od 2014 r.) to opóźnienie w witrynach zoptymalizowanych pod kątem urządzeń mobilnych nie jest już dostępne. Niedługo potem przeglądarka Firefox oraz IE/Edge zrobiły to samo, a w marcu 2016 roku podobna poprawka pojawiła się w iOS 9.3.
Różnica w skuteczności jest ogromna.
Interfejs użytkownika, który reaguje natychmiast, oznacza, że może szybko nacisnąć każdy przycisk, bez obaw i oczekiwania na odpowiedź. Więcej informacji o wpływie czasu reakcji człowieka i wydajności sieci znajdziesz we wprowadzeniu do RAIL.
Aby usunąć opóźnienie kliknięcia wynoszące 300–350 ms, w <head> strony musisz tylko:
<meta name="viewport" content="width=device-width">
Ta opcja ustawia szerokość widocznego obszaru na taką samą jak na urządzeniu. Jest to najlepsze rozwiązanie w przypadku witryn zoptymalizowanych pod kątem urządzeń mobilnych. Gdy używasz tego tagu, przeglądarki zakładają, że tekst jest czytelny na urządzeniach mobilnych, a funkcja powiększania dwukrotnym dotknięciem odchodzi na rzecz szybszych kliknięć.
Jeśli z jakiegoś powodu nie możesz wprowadzić tej zmiany, możesz użyć elementu touch-action: manipulation, aby uzyskać ten sam efekt na stronie lub na określonych elementach:
html {
touch-action: manipulation;
}
Ta metoda nie jest obsługiwana w Safari, więc zdecydowanie zalecamy użycie tagu widocznego obszaru.
Czy utrata powiększenia dwukrotnym dotknięciem jest problemem z ułatwieniami dostępu?
Nie. Powiększanie palcami przez ściągnięcie palców nadal działa, a funkcje systemu operacyjnego są dostosowane do użytkowników, którym ten gest sprawia trudności. Na Androidzie za to odpowiadają gesty powiększenia. Tego typu narzędzia działają nawet poza przeglądarką.
A co ze starszymi przeglądarkami?
FastClick firmy FT Labs używa zdarzeń dotyku, aby szybciej generować kliknięcia i usuwać gest dwukrotnego dotknięcia. Identyfikuje, jak bardzo Twój palec przesunął się między touchstart a touchend, aby odróżnić przewinięcia i kliknięcia.
Dodanie detektora touchstart do wszystkich elementów ma wpływ na wydajność, ponieważ interakcje niższego poziomu, takie jak przewijanie, są opóźnione przez wywołanie odbiornika w celu sprawdzenia, czy występuje wartość event.preventDefault()s. Na szczęście FastClick unika ustawiania odbiorników w sytuacjach, gdy przeglądarka usuwa już 300 ms opóźnienia, dzięki czemu obie te funkcje działają dobrze.