Jak wykryć przeglądarkę mobilną w JavaScript

By /

JavaScript

Wykrywanie, czy użytkownik korzysta z przeglądarki mobilnej, jest kluczowym elementem tworzenia responsywnych i interaktywnych stron internetowych. Pozwala to na dostosowanie treści, funkcjonalności i interfejsu użytkownika do mniejszych ekranów i specyficznych warunków urządzeń mobilnych. W tej lekcji omówimy, jak można wykryć przeglądarkę mobilną za pomocą JavaScript.

Przykład kodu

Poniżej znajduje się przykład kodu, który pokazuje, jak można wykryć przeglądarkę mobilną w JavaScript. Kod ten będzie częścią prostego dokumentu HTML, który wykorzysta JavaScript do sprawdzenia, czy strona jest przeglądana na urządzeniu mobilnym, i wyświetli odpowiedni komunikat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wykrywanie przeglądarki mobilnej</title>
</head>
<body>
    <script>
        // Funkcja do wykrywania przeglądarki mobilnej
        function detectMobileBrowser() {
            let userAgent = navigator.userAgent || navigator.vendor || window.opera;
            // Reguła wyrażenia regularnego do sprawdzenia
            const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase());
            
            if (isMobile) {
                alert("Używasz przeglądarki mobilnej.");
            } else {
                alert("Używasz przeglądarki desktopowej.");
            }
        }
        
        // Wywołanie funkcji przy załadowaniu strony
        detectMobileBrowser();
    </script>
</body>
</html>

Omówienie kodu

  • Funkcja detectMobileBrowser: Ta funkcja jest kluczowym elementem naszego kodu. Wykorzystuje ona obiekt navigator dostępny w przeglądarkach do pobrania ciągu userAgent, który zawiera informacje o przeglądarce i systemie operacyjnym użytkownika.
  • Wyrażenie regularne: Kod używa wyrażenia regularnego do sprawdzenia, czy userAgent zawiera którekolwiek z słów kluczowych identyfikujących urządzenia mobilne. Słowa kluczowe to nazwy systemów operacyjnych i przeglądarek typowo używanych na urządzeniach mobilnych.
  • Warunek if: Na podstawie wyniku testu wyrażenia regularnego, funkcja wyświetla alert z informacją, czy użytkownik korzysta z przeglądarki mobilnej, czy desktopowej.

Podsumowanie

Wykrywanie przeglądarki mobilnej w JavaScript umożliwia tworzenie bardziej interaktywnych i dostosowanych do użytkownika stron internetowych. Przedstawiony przykład kodu jest prostym sposobem na osiągnięcie tego celu. Ważne jest jednak zaznaczenie, że metoda oparta na userAgent może nie być w 100% niezawodna ze względu na możliwość modyfikacji tego ciągu przez niektóre przeglądarki lub narzędzia. Mimo to, jest to popularna i łatwo implementowalna metoda, która w wielu przypadkach dostarcza wystarczająco dokładnych informacji do poprawy doświadczenia użytkownika na naszej stronie.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top