Wykryj telefon z Androidem za pomocą Javascript / jQuery

122

Jak mogę wykryć, że używanym urządzeniem jest Android dla witryny mobilnej?

Muszę zastosować określone atrybuty css do platformy Android.

Dzięki

Xavier
źródło

Odpowiedzi:

223

Spójrz na to: http://davidwalsh.name/detect-android

JavaScript:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

Edycja : jak wskazano w niektórych komentarzach, będzie to działać w 99% przypadków, ale niektóre przypadki skrajne nie są uwzględnione. Jeśli potrzebujesz znacznie bardziej zaawansowanego i niezawodnego rozwiązania w JS, powinieneś skorzystać z platformy.js: https://github.com/bestiejs/platform.js

Michael Lumbroso
źródło
5
nie zapomnij również sprawdzić, czy są dostępne tablety z Androidem
2
Warto zauważyć, że nie zawsze działa to na urządzeniach z Androidem, ponieważ na przykład programy klienckie zgłaszane przez urządzenia Kindle Fire HD w ogóle nie zawierają słowa „android”.
djbp
3
Podejście navigator.userAgent nie działa na urządzeniach Samsung Galaxy. W specyfikacji przeglądarki nie ma „Androida”.
AsafK
2
Pierwsze dwie linijki rozwiązania JS można uprościć do:var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo
4
Twoje rozwiązanie nie działa. Oto agent użytkownika Nokia Lumia. I zgadnij co? pasuje jako android:Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 625; Orange) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
Sam Jason Braddock
2

Myślę, że odpowiedź Michała jest najlepsza, ale możemy pójść o krok dalej i dynamicznie załadować plik CSS Androida zgodnie z oryginalnym pytaniem:

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}
drlarsen
źródło
1
Dlaczego miałbyś to robić, skoro możesz używać zapytań o media? Wykrywanie urządzeń JS powinno służyć tylko do ulepszeń, takich jak dodanie zaproszenia do zainstalowania aplikacji. Renderowanie strony nigdy nie powinno na tym polegać, ponieważ będziesz mieć problemy z wydajnością i okropną użytecznością.
camilokawerin
1
@camilokawerin Twoja odpowiedź powinna być skierowana do autora. Po prostu odpowiadałem na jego pytanie. Są jednak przypadki, w których potrzebujesz CSS dla konkretnej platformy. Na przykład, jeśli chcesz, aby styl wizualny interfejsu pasował do urządzenia.
drlarsen
2
;(function() {
    var redirect = false
    if (navigator.userAgent.match(/iPhone/i)) {
        redirect = true
    }
    if (navigator.userAgent.match(/iPod/i)) {
        redirect = true
    }
    var isAndroid = /(android)/i.test(navigator.userAgent)
    var isMobile = /(mobile)/i.test(navigator.userAgent)
    if (isAndroid && isMobile) {
        redirect = true
    }
    if (redirect) {
        window.location.replace('jQueryMobileSite')
    }
})()
Phillip Senn
źródło
-3

js, łapie też iPada:

var is_mobile = /mobile|android/i.test (navigator.userAgent);
jonny
źródło
3
Nie działa, ponieważ łapie wiele urządzeń, nie tylko Androida, jak wymaga tego pytanie.
NickG,
1
Użyj przynajmniej czegoś takiego: /android.*(?=mobile)/i.test(navigator.userAgent); do wykrywania telefonu z systemem Android. Ale to wyrażenie regularne zawiera „drogie” kwantyfikatory, więc odpowiedź Philipa z dwoma oddzielnymi testami może być bardziej odpowiednia.
Vadim P.