Użytkownicy mobilni stanowią teraz dużą część ruchu w sieci, ale wiele stron nadal źle obsługuje wykrywanie mobilne w JavaScript. Wynik to znane, wolno ładujące się strony, zepsute interakcje dotykowe, niepotrzebne wyskakujące okienka lub funkcje, które zachowują się inaczej na telefonach i tabletach niż na komputerach. Dla programistów, freelancerów i małych przedsiębiorców próbujących budować praktyczne, szybkie doświadczenia internetowe, to nie drobny szczegół. To bezpośrednio wpływa na użyteczność, konwersję i zaufanie klientów.
Trudna część polega na tym, że wykrywanie mobilne w JavaScript nie jest jedną techniką. Może oznaczać sprawdzanie rozmiaru ekranu, odczytywanie ciągu User-Agent, wykrywanie możliwości dotyku lub obserwowanie wsparcia funkcji w przeglądarce. Każda metoda rozwiązuje inny problem, a każda ma ograniczenia. Najlepsze podejście to zazwyczaj nie pytać, „Czy to urządzenie mobilne?”, lecz raczej, „Jakie możliwości ma to urządzenie i przeglądarka?”.
Co to jest wykrywanie mobilne w JavaScript?
W istocie, wykrywanie mobilne w JavaScript to proces identyfikowania, czy odwiedzający prawdopodobnie korzysta z urządzenia mobilnego, a czasem także tego, jaki rodzaj środowiska mobilnego używają. Te informacje mogą być użyte do dostosowania nawigacji, optymalizacji interakcji, ładowania lżejszych zasobów, dostosowania układów lub dostosowania zachowań dla przypadków użycia skoncentrowanych na dotyku.
Wiele osób zakłada, że to proste, że ekran jest mały. W praktyce jest to bardziej zniuansowane. Małe okno przeglądarki na komputerze nie jest tym samym co telefon. Duży tablet może mieć ekran szerszy niż niektóre laptopy. Urządzenie składane może zmieniać kształt podczas interakcji użytkownika z twoją aplikacją. JavaScript może pomóc wykryć takie sytuacje, ale tylko wtedy, gdy rozumiesz, jaki sygnał naprawdę mierzysz.
Stary styl wykrywania mobilnego opierał się w dużej mierze na ciągu User-Agent, który jest tekstowym identyfikatorem wysyłanym przez przeglądarkę. Przez lata deweloperzy analizowali ten ciąg, by zgadnąć, czy urządzenie to iPhone, Androidowy telefon, iPad, czy desktopowa przeglądarka. Ta metoda nadal istnieje, ale jest mniej niezawodna niż kiedyś. Przeglądarki coraz częściej ograniczają lub standaryzują dane User-Agent ze względu na prywatność i zgodność. Zobacz więcej o ciągu User-Agent na MDN: ciąg User-Agent.
Nowoczesny frontend skłania się bardziej ku projektowaniu responsywnemu i detekcji funkcji. Zamiast tworzyć szerokie założenia dotyczące kategorii urządzeń, deweloperzy używają zapytania mediów CSS i sprawdzeń w JavaScript, aby reagować na rozmiar viewportu, obsługę dotyku, orientację, typ wskaźnika, warunki sieciowe lub cechy przeglądarki. To prowadzi do bardziej odpornych aplikacji i redukuje błędy w skrajnych przypadkach.
Dlaczego deweloperzy nadal korzystają z wykrywania mobilnego
Chociaż projektowanie responsywne obsługuje większość pracy nad układem, nadal istnieją praktyczne powody, aby wykrywać konteksty mobilne za pomocą JavaScript. Strona biznesowa może chcieć uprościć skomplikowaną tabelę cen na mniejszych viewportach. Aplikacja do rezerwacji może przejść z interakcji opartych na najechaniu na sterowanie dotykowe. Panel sterowania może opóźniać nieistotne skrypty dla użytkowników z ograniczonym połączeniem mobilnym.
Istnieje także aspekt wydajnościowy. Jeśli wiesz, że użytkownik prawdopodobnie korzysta z środowiska mobilnego, możesz wybrać ładowanie mediów wysokiej rozdzielczości na leniwie, kompresję interakcji lub unikanie kosztownych animacji. To nie oznacza, że dostarczasz gorsze doświadczenie. To oznacza dostarczanie bardziej odpowiedniego.
Wykrywanie urządzenia a wykrywanie możliwości
Ta różnica ma znaczenie. Wykrywanie urządzenia stara się odpowiedzieć na pytanie, czym jest urządzenie. Wykrywanie możliwości stara się odpowiedzieć na to, co przeglądarka potrafi zrobić. Jeśli twoim celem jest poprawa użyteczności, wykrywanie możliwości jest zwykle bezpieczniejsze.
Na przykład, jeśli chcesz wiedzieć, czy pokazywać podpowiedzi oparte na hoverze, sprawdzanie ciągu User-Agent zawierającego „mobile” to słabe rozwiązanie. Lepsze podejście to zapytać, czy urządzenie ma precyzyjny wskaźnik lub obsługuje hover. To pytanie o możliwości, a JavaScript może pracować z tymi sygnałami skuteczniej niż ogólna etykieta „mobilne”.
Kluczowe aspekty wykrywania mobilnego w JavaScript
Aby podejmować inteligentne decyzje, musisz zrozumieć główne metody wykrywania i to, do czego są dobre. Żadna pojedyncza metoda nie jest doskonała, więc siła wynika z używania właściwego narzędzia do właściwego zadania.
Wykrywanie User-Agent
Wykrywanie User-Agent wciąż jest szeroko stosowane, ponieważ jest proste i znane. W JavaScript deweloperzy często analizują navigator.userAgent i szukają oznaczeń takich jak Android, iPhone lub iPad.
function isMobileByUserAgent() {
return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
navigator.userAgent
);
}
console.log(isMobileByUserAgent());
Ta metoda może działać dla szybkich heurystyk, zwłaszcza w starszych kodach lub skryptach analitycznych. Jest także pomocna, gdy potrzebujesz przybliżonej kategoryzacji dla znanych rodzin urządzeń.
Minusy to niezawodność. Ciągi User-Agent mogą być sfałszowywane, zmieniane lub normalizowane w różnych przeglądarkach. Nie są przyszłościowe, a często łamią się, gdy pojawiają się nowe urządzenia. Jeśli twoja logika biznesowa mocno na nich polega, utrzymanie staje się bolesne.
Viewport i wykrywanie szerokości ekranu
Bardziej powszechnym wzorcem jest wykrywanie szerokości viewport i dostosowywanie zachowania odpowiednio. To ściśle koresponduje z projektowaniem stron responsywnych i często odpowiada temu, co użytkownicy faktycznie doświadczają na ekranie.
function isSmallViewport() {
return window.innerWidth <= 768;
}
console.log(isSmallViewport());
To przydatne, gdy chodzi o układ lub dostępną przestrzeń ekranową. Jeśli boczne menu powinno się zwinąć poniżej określonej szerokości, detekcja viewport jest rozsądnym rozwiązaniem.
Nadal ważne jest, aby precyzyjnie rozumieć, co to znaczy. Nie mówi ci, czy użytkownik jest na telefonie. Mówi jedynie, że bieżący viewport jest mały. Zrenowujący się desktop może wywołać ten sam wynik. Dla wielu decyzji interfejsu to OK. Dla klasyfikacji urządzeń to nie wystarczające.
Wykrywanie dotyku
Niektórzy programiści utożsamiają obsługę dotyku z użyciem mobilnym, ale to uproszczenie bywa mylące. Wiele laptopów obsługuje dotyk, a niektóre mobilne przeglądarki mogą zachowywać się inaczej niż oczekiwano. Mimo to możliwości dotyku są wciąż wartościowe, gdy interfejs potrzebuje różnych gestów lub kontrolek.
function supportsTouch() {
return (
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
}
console.log(supportsTouch());
To działa najlepiej, gdy odpowiadasz na konkretne pytanie interakcyjne. Jeśli potrzebujesz większych tarcz dotykowych, gestów przewijania lub przeciągania dopasowanych do dotyku, to to sprawdzenie może pomóc. Jeśli próbujesz zdecydować, czy odwiedzający jest „mobilny”, to jest to zbyt szerokie samo w sobie.
Zapytania mediów w JavaScript
JavaScript może również odczytywać te same warunki używane w zapytaniach mediów CSS. Często jest to jedno z najczystszych sposobów na zgranie stylów i logiki skryptów.
const mobileQuery = window.matchMedia("(max-width: 768px)");
function handleViewportChange(e) {
if (e.matches) {
console.log("Prawdopodobnie viewport mobilny");
} else {
console.log("Większy viewport");
}
}
handleViewportChange(mobileQuery);
mobileQuery.addEventListener("change", handleViewportChange);
Ta metoda jest szczególnie użyteczna, gdy UI zmienia się dynamicznie. Użytkownik może obrócić telefon, zmienić rozmiar przeglądarki albo przechodzić między trybami podziału ekranu. Wykrywanie oparte na zapytaniach mediów pozwala twoim skryptom reagować w czasie rzeczywistym, zamiast zakładać, że stan urządzenia nigdy się nie zmienia.
Wykrywanie wskaźnika i hover
Bardziej nowoczesna i często pomijana strategia to sprawdzanie zachowania wejścia. Ma to znaczenie, ponieważ wiele problemów UX związanych z urządzeniami mobilnymi to w rzeczywistości problemy z wejściem.
const canHover = window.matchMedia("(hover: hover)").matches;
const menuButton = document.querySelector(".menu-button");
const menu = document.querySelector(".menu");
if (canHover) {
menuButton.addEventListener("mouseenter", () => {
menu.classList.add("open");
});
menuButton.addEventListener("mouseleave", () => {
menu.classList.remove("open");
});
} else {
menuButton.addEventListener("click", () => {
menu.classList.toggle("open");
});
}
To silny wzorzec, ponieważ dostosowuje się do sposobu, w jaki użytkownik wchodzi w interakcję, a nie do nazwy urządzenia. Dotykowy laptop i telefon mogą oboje unikać logiki opartej na hover, podczas gdy przeglądarka na komputerze utrzymuje bogatsze zachowanie myszy.
Łącz sygnały, gdy to konieczne
Czasami jeden sygnał nie wystarcza. Jeśli musisz dokonać szerszego zgadywania dotyczącego użycia mobilnego, łączenie sprawdzeń może poprawić dokładność, bez udawania pewności.
function isLikelyMobile() {
const smallScreen = window.matchMedia("(max-width: 768px)").matches;
const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
const mobileUA = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
navigator.userAgent
);
return smallScreen && (coarsePointer || mobileUA);
}
console.log(isLikelyMobile());
To nadal nie powinno być używane jako twarda reguła bezpieczeństwa lub krytyczna dla biznesu. To heurystyka. Dla dopasowania UI jednak może być praktyczne, gdy potrzebujesz kategorii zapasowej do analityki lub lekkich modyfikacji doświadczenia.
Obserwuj zmiany rozmiaru i orientacji
Jednym z powszechnych błędów jest sprawdzanie raz podczas ładowania strony i nigdy nie aktualizowanie ponownie. Warunki mobilne mogą się zmieniać podczas gdy strona jest otwarta. Zmiany orientacji, aplikacje w trybie podziału ekranu, urządzenia składane i zmiana rozmiaru przeglądarki wszystkie wpływają na środowisko.
function updateDeviceState() {
const mobileSized = window.matchMedia("(max-width: 768px)").matches;
document.body.classList.toggle("mobile-sized", mobileSized);
}
window.addEventListener("resize", updateDeviceState);
window.addEventListener("orientationchange", updateDeviceState);
updateDeviceState();
Ten rodzaj aktualizacji oparty na zdarzeniach utrzymuje interfejs w zgodzie z bieżącym kontekstem. Jest to szczególnie ważne dla pulpitów, aplikacji internetowych, systemów rezerwacji i narzędzi, które pozostają otwarte przez długie sesje.
Unikaj częstych błędów implementacyjnych
Pierwszy błąd to używanie wykrywania User-Agent jako jedynego źródła prawdy. Wydaje się to wygodne, ale z czasem tworzy ukryte błędy. Drugi to używanie wykrywania mobilnego do ograniczania dostępu do kluczowych treści. Użytkownicy nie powinni tracić kluczowej funkcjonalności, bo twój skrypt zgadł źle.
Kolejny powszechny problem to nadmierna inżynieria. Nie każda strona potrzebuje złożonego poziomu wykrywania urządzeń. Jeśli twoim celem jest po prostu układanie kart na mniejszych ekranach lub powiększanie obszarów dotyku, wystarczą CSS i kilka ukierunkowanych sprawdzeń JavaScript. Zachowaj logikę powiązaną z rzeczywistymi potrzebami produktu.
Praktyczny zestaw dla większości stron
Dla wielu stron firmowych i aplikacji webowych sensowne podejście wygląda tak:
- Używaj zapytań mediów CSS do układu i odstępów.
- Używaj matchMedia() w JavaScript do zachowania związanego z viewportem lub typem wejścia.
- Używaj detekcji funkcji do dotyku, hovera lub interakcji związanych z wskaźnikiem.
- Używaj ograniczonego sprawdzania User-Agent dla skrajnych przypadków lub analityki, nie jako twojej głównej strategii.
Taki sposób pracy daje elastyczność bez kruchości front-endu. Łatwiej też testować, wyjaśniać i utrzymywać w różnych projektach.
Testowanie twojej logiki wykrywania mobilnego
Testowanie ma znaczenie, ponieważ błędy w wykrywaniu mobilnym często kryją się w skrajnych przypadkach. Strona może wyglądać na OK w przeglądarce desktopowej po zmianie szerokości do rozmiaru telefonu, a potem zachowywać się inaczej na rzeczywistym urządzeniu z dotykowym wejściem i paskiem przeglądarki.
Używaj narzędzi developerskich przeglądarki do szybkich kontroli viewport, ale również testuj na prawdziwych telefonach i tabletach, jeżeli to możliwe. Zwracaj uwagę na zmiany orientacji, nakładki klawiatury, zachowania dotyku, stany hover i wydajność w wolniejszych warunkach. Jeśli twoja witryna obsługuje klientów, nie tylko deweloperów, te szczegóły kształtują UX bardziej niż sama metoda wykrywania.
Podsumowanie
Wykrywanie urządzeń mobilnych w JavaScript to mniej o identyfikowaniu idealnej kategorii urządzeń, a raczej o wyborze właściwego sygnału do zadania. Wykrywanie User-Agent może wciąż pomóc w ograniczonych przypadkach, ale nowoczesny rozwój lepiej działa, gdy skupisz się na rozmiarze viewport, wsparciu funkcji, możliwości dotyku i zachowaniu wejścia. Takie podejście jest bardziej odporne, bardziej precyzyjne dla decyzji UX i łatwiejsze do utrzymania.
Kolejny krok jest prosty. Przejrzyj jeden fragment strony, który zachowuje się inaczej na telefonach, taki jak nawigacja, formularze, media lub interaktywne widżety. Następnie zapytaj, co naprawdę musisz wykryć: przestrzeń na ekranie, dotyk, hover, czy przybliżony heurystyczny wskaźnik mobilny. Gdy na to jasno odpowiesz, twoje JavaScript stanie się czystsze, a użytkownicy uzyskają płynniejsze doświadczenie na każdym urządzeniu.