Jak wykryć przeglądarki mobilne za pomocą JavaScript

Wykrywanie urządzeń mobilnych zawsze było kluczowym aspektem tworzenia aplikacji. Dotyczy to zarówno aplikacji, jak i oprogramowania oraz stron internetowych. Istnieje niezliczona liczba powodów, dla których warto sprawdzać agenty przeglądarki mobilnej. Co najważniejsze, możliwość renderowania unikalnego doświadczenia użytkownika.

Sama biblioteka UAParser.js pobiera miliony pakietów tygodniowo. W większości przypadków wystarczy, jeśli budujesz coś od podstaw. Ale co z alternatywnymi sposobami wykrywania przeglądarek mobilnych za pomocą JavaScript?

Czasami możesz potrzebować prostego rozwiązania, które wykona zadanie bez żadnych bibliotek. W tym artykule przedstawię Ci kilka technik JavaScript do wykrywania użytkowników mobilnych. Daj mi znać, jeśli coś przegapiłem!

nawigator.userAgent

Świętym Graalem wykrywania przeglądarek jest właściwość navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Jest to oczywiście bardzo prymitywny sposób robienia tego. Można nim łatwo manipulować, ponieważ właściwość User-Agent może zostać sfałszowana. Ale ponieważ spełnia swoje zadanie, nadal możesz go używać w różnych projektach. Np. Landing pages lub zrobienie niestandardowego przekierowania do wersji mobilnej.

Jak używać navigator.userAgent do wykrywania typu przeglądarki i wyświetlania treści w oparciu o konkretną przeglądarkę?

W porządku, więc może istnieć unikalny przypadek użycia, w którym chcesz wykryć konkretną przeglądarkę, taką jak Chrome i Firefox (lub w tym przypadku Android i iPhone), a następnie użyć tych danych do wyświetlenia określonej zawartości. Takie podejście jest często używane do dostarczania/zmiany linków do pobierania dla określonych przeglądarek.

W takim przypadku możesz skorzystać z następującej funkcji.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Możesz skomentować różne instrukcje else if dla przeglądarek, których nie chcesz sprawdzać, i podobnie – możesz dodać dodatkowe przeglądarki, które chcesz sprawdzić.

DotknijZdarzenie

Jedną z metod wykrywania użytkowników mobilnych jest sprawdzenie, czy urządzenie ma ekran dotykowy.

Korzystając z właściwości GlobalEventHandlers.ontouchstart, możesz w prosty sposób sprawdzić, w jaki sposób użytkownik wchodził w interakcję z Twoją aplikacją. Jeśli interakcja pochodziła z ekranu dotykowego, możesz zwrócić mobilną wersję aplikacji lub strony.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Urządzenia z ekranem dotykowym, takie jak Surface, nie mają tej właściwości. Dzięki temu użytkownicy korzystający z urządzeń dotykowych opartych na komputerach stacjonarnych nadal będą widzieć komputerową wersję Twoich stron.

Okno.matchMedia()

Window.matchMedia() to jedna z najlepszych właściwości do wykrywania użytkowników mobilnych za pomocą JavaScript. A to dlatego, że pozwala na bezpośrednią interakcję z CSS.

W wielu przypadkach zapytania o media są lepsze, ponieważ mają wbudowane narzędzia do wykrywania urządzeń mobilnych. Na przykład możesz zadzwonić, aby sprawdzić, czy „pointer:coarse” jest prawdziwe.

Ta konkretna instrukcja weryfikuje, czy wskaźnik urządzenia jest dokładny czy zgrubny .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternatywnie urządzenie może mieć zarówno drobną, jak i zgrubną wskazówkę. W tym przypadku użycia możemy sprawdzić, czy jakiekolwiek wskaźniki są zgrubne.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Należy pamiętać, że to tylko waliduje zapytanie jako prawdziwe lub fałszywe. Bardziej wyrafinowanym sposobem sprawdzania urządzeń mobilnych jest bezpośrednie użycie zapytań o media.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

To zapytanie bezpośrednio sprawdzi maksymalną szerokość urządzenia i stwierdzi, czy spełnia ono kryteria. Ponownie, jest to dość dużo pracy, aby poprawnie uzyskać wszystkie urządzenia. W związku z tym łatwiej jest korzystać z gotowej biblioteki ze zdefiniowanymi wszystkimi typami urządzeń.

Przydatne w pewnych kontekstach

Przez lata pojawiło się wiele właściwości JavaScript do wykrywania typów urządzeń. Wiele z nich zostało przestarzałych, ale większość innych zintegrowano z bibliotekami. Co również okazuje się najlepszym sposobem na prawidłowe wykrywanie urządzeń mobilnych.

Wreszcie, większość nowoczesnych platform zawiera już wykrywanie urządzeń mobilnych jako część samej struktury. Warto zajrzeć, jeśli nie chcesz wykonywać całej pracy nóg.

Biblioteki do wykrywania urządzeń mobilnych

W tej sekcji przedstawię najpopularniejsze biblioteki JavaScript do wykrywania urządzeń mobilnych. Ponownie podkreślam, że są one specyficzne dla JavaScript. Zapoznaj się z dokumentacją, aby uzyskać informacje o prawidłowej implementacji w swojej aplikacji.

UAParser.js

Jeśli chodzi o kompletne biblioteki, UAParser jest najlepszy. Z ponad 10 milionami pobrań tygodniowo na samym npm – UAParser jest de facto rozwiązaniem do wykrywania urządzeń mobilnych. Jak sama nazwa wskazuje – biblioteka działa na zasadzie parsowania ciągów User-Agent.

Jednak to, co sprawia, że ​​jest tak popularny, to fakt, że możesz analizować setki odmian urządzeń. A wszystko to jest bardzo dobrze udokumentowane. Możesz przejść od praktycznych dostawców urządzeń do bardziej skomplikowanych wzorców wykrywania, takich jak architektura procesora.

mobile-detect.js

Jest to dość prosty port biblioteki Mobile Detect dla PHP, udostępnionej społeczności przez Heinricha Goebla. Sama biblioteka wykorzystuje do wykrywania User-Agent, więc jak omówiliśmy wcześniej – nie jest to najlepsza opcja.

Mimo to powinien załatwić sprawę, jeśli chodzi o praktyczne szablony HTML lub projekty portfolio.

isMobile

Tutaj mamy kolejne podejście do właściwości User-Agent Navigator od Kai Mallea. Chociaż nadal jest to uproszczone rozwiązanie, podoba mi się, że isMobile zapewnia różnorodne specyfikacje. Na przykład możesz testować na dowolnym urządzeniu mobilnym lub konkretnym, takim jak telefon lub tablet .

Reaguj-wykryj-urządzenie

Czy jesteś programistą React.js?

W takim razie ta biblioteka Michaela Laktionova jest dla Ciebie. Działa zgodnie z oczekiwaniami – najpierw biblioteka wykrywa typ urządzenia, a następnie renderuje widok na podstawie tego typu. Działa bezbłędnie dzięki integracji komponentów i może być dalej dostosowywany za pomocą wywołań API.

Interesującym faktem jest liczba selektorów, które zawiera ta biblioteka. Obejmuje urządzenia takie jak inteligentne telewizory, urządzenia do noszenia, różne urządzenia iPhone i wiele innych. Daje to szeroki wybór opcji projektowych podczas tworzenia aplikacji dla konkretnego urządzenia.