Gdy projekt wyświetla się na urządzeniu mobilnym, zadbaj o to, aby interaktywne elementy, takie jak przyciski czy linki, były wystarczająco duże i mały wokół nich odpowiednią ilość miejsca, aby można je było łatwo nacisnąć, nie zahaczając o inne elementy. Jest to przydatne dla wszystkich użytkowników, ale szczególnie dla osób z niepełnosprawnością ruchową.
Minimalny zalecany rozmiar elementu dotykowego to około 48 pikseli niezależnie od urządzenia w witrynie z prawidłowo ustawionym widokiem mobilnym. Na przykład ikona może mieć tylko 24 piksele szerokości i 24 piksele wysokości, ale możesz użyć dodatkowego marginesu, aby zwiększyć rozmiar docelowy dotykowego elementu do 48 pikseli. Obszar 48 x 48 pikseli odpowiada około 9 mm, czyli mniej więcej wielkości opuszki palca.
W pliku demonstracyjnym dodałem wypełnienie do wszystkich linków, aby mieć pewność, że spełniają one minimalny rozmiar.
Docelowe punkty dotykowe powinny też być od siebie oddalone o około 8 pikseli w poziomie i w pionie, aby palec użytkownika naciskający jeden docel dotykowy nie dotykał przypadkowo innego celu dotykowego.
Testowanie docelowych elementów dotykowych
Jeśli celem jest tekst, a do ustawienia jego rozmiaru i marginesów użyto wartości względnych, takich jak em lub rem, możesz użyć DevTools, aby sprawdzić, czy obliczona wartość tego obszaru jest wystarczająco duża.
W poniższym przykładzie jako tekstu i dopełnienia używam właściwości em.
Sprawdź a linku i w Narzędziach deweloperskich w Chrome przejdź do pulta Obliczenia, gdzie możesz sprawdzić różne części pola i zobaczyć, do jakiego rozmiaru piksela się sprowadzają.
W Narzędziach deweloperskich w Firefoksie znajduje się panel Układ.
W tym panelu znajdziesz rzeczywisty rozmiar sprawdzanego elementu.
Wykrywanie używania ekranu dotykowego za pomocą zapytań o multimedia
Zamiast zwykłego testowania wymiarów widoku i potem zgadywania, że małe wymiary to prawdopodobnie telefony lub tablety, które z kolei używają ekranu dotykowego, możesz teraz stosować bardziej niezawodne sposoby dostosowywania projektu do faktycznych możliwości urządzenia.
Jedną z funkcji związanych z multimediami, które możemy teraz testować za pomocą zapytań o multimedia, jest to, czy główne dane wejściowe użytkownika to ekran dotykowy (pointer) oraz czy którekolwiek z wykrytych obecnie źródeł sygnału jest ekranem dotykowym (any-pointer). Funkcje pointer i any-pointer będą zwracały wartość fine lub coarse.
Dokładny wskaźnik to ktoś, kto używa myszy lub gładzika, nawet jeśli mysz jest połączona z telefonem przez Bluetooth.
Wskazówka coarse wskazuje ekran dotykowy, który może być ekranem urządzenia mobilnego, ale też ekranem laptopa lub dużego tabletu.
Jeśli dostosowujesz CSS w zapytaniu o multimedia, aby zwiększyć liczbę docelowych elementów dotykowych, użycie przybliżonego wskaźnika pozwala zwiększyć liczbę docelowych elementów dotykowych u wszystkich użytkowników z ekranem dotykowym. Dzięki temu obszar dotknięcia jest większy, niezależnie od tego, czy urządzenie jest telefonem, czy większym urządzeniem.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Więcej informacji o funkcjach związanych z interakcjami w mediach, np. o wskaźnikach, znajdziesz w artykule Podstawowe informacje o elastycznym projektowaniu witryn.