Gdy Twój projekt wyświetla się na urządzeniu mobilnym, zadbaj o to, aby elementy interaktywne, takie jak przyciski czy linki, były wystarczająco duże, i mamy wokół nich odpowiednią ilość miejsca, dzięki czemu można je łatwo nacisnąć, ale nie zasłaniają innych elementów. przyniesie to korzyści wszystkim użytkownikom, a zwłaszcza dla osób z niepełnosprawnością ruchową.
Minimalny zalecany rozmiar docelowego elementu dotykowego to około 48 pikseli niezależnych od urządzenia w witrynie z prawidłowo ustawionym widocznym obszarem. Na przykład ikona może mieć tylko szerokość i wysokość 24 piksele, możesz użyć dodatkowego dopełnienia, by rozmiar elementu dotykowego wynosił maksymalnie 48 pikseli. Obszar 48 x 48 pikseli odpowiada około 9 mm. czyli wielkości obszaru opuszki palca użytkownika.
W prezentacji dodaliśmy do wszystkich linków dopełnienie, aby miały minimalny rozmiar.
Docelowe elementy dotykowe powinny też znajdować się w odległości około 8 pikseli od siebie, w pionie i w poziomie, by użytkownik naciskający jeden element dotykowy nie stykał się przypadkiem z innym.
Testowanie docelowych elementów dotykowych
Jeśli celem jest tekst i zastosowano wartości względne, takie jak em lub rem, aby określić rozmiar tekstu i dopełnienia,
możesz użyć Narzędzi deweloperskich, aby sprawdzić, czy obliczona wartość dla danego 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.
a w Narzędziach deweloperskich w Chrome przełącz się na Computed panel (Obliczony panel), w którym możesz przyjrzeć się różnym elementom skrzynki.
i zobaczyć, jaki rozmiar w pikselach mają.
W Narzędziach deweloperskich w Firefoksie znajduje się panel Układ.
Zobaczysz w nim rzeczywisty rozmiar sprawdzanego elementu.
Używanie zapytań o multimedia do wykrywania użycia ekranu dotykowego
Zamiast tylko testować wymiary widocznego obszaru i zgadywać, że małe wymiary to zwykle telefony lub tablety, na ekranie dotykowym. Istnieją teraz bardziej solidne sposoby zgodnie z rzeczywistymi możliwościami urządzenia.
Jedna z funkcji multimediów, które możemy teraz przetestować za pomocą zapytań o media
określa, czy głównym wejściem użytkownika jest ekran dotykowy (pointer).
czy którekolwiek z wykrytych obecnie źródeł sygnału jest ekranem dotykowym (any-pointer).
Funkcje pointer i any-pointer wrócą na poziom fine lub coarse.
Drobnym wskaźnikiem może być np. ktoś używający myszki lub trackpada,
nawet jeśli mysz jest połączona z telefonem przez Bluetooth.
Wskaźnik coarse wskazuje ekran dotykowy.
Może to być urządzenie mobilne,
ale też ekran laptopa lub duży tablet.
Jeśli dostosowujesz CSS w zapytaniu o multimedia, aby zwiększyć docelowy element dotykowy, testowanie precyzyjnego wskaźnika pozwala zwiększyć liczbę docelowych elementów dotykowych wszystkich użytkowników ekranów dotykowych. Większy obszar kliknięcia zapewnia zarówno telefon, jak i większe urządzenie.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Dowiedz się więcej o funkcjach multimediów związanych z interakcją, takich jak wskaźnik w artykule Podstawowe informacje o elastycznym projektowaniu witryn.