Обнаружение телефона Android через Javascript / jQuery

122

Как я могу определить, что используемое устройство является Android для мобильного веб-сайта?

Мне нужно применить определенные атрибуты css к платформе Android.

Спасибо

Ксавье
источник

Ответы:

223

Взгляните на это: 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();
}

Изменить : как указано в некоторых комментариях, это будет работать в 99% случаев, но некоторые крайние случаи не рассматриваются. Если вам нужно гораздо более продвинутое и надежное решение на JS, вы должны использовать platform.js: https://github.com/bestiejs/platform.js

Майкл Лумброзо
источник
5
не забудьте также проверить наличие планшетов с Android: googlewebmastercentral.blogspot.com/2011/03/…
2
Стоит отметить, что это не всегда работает для устройств Android, поскольку, например, пользовательские агенты, о которых сообщают устройства Kindle Fire HD, вообще не содержат слова «android».
djbp
3
Подход navigator.userAgent не работает на устройствах samsung galaxy. В спецификации браузера нет слова «Android».
AsafK
2
Первые две строки JS-решения можно упростить до:var isAndroid = /Android/i.test(navigator.userAgent)
Dave Koo
4
Ваше решение не работает. Вот агент пользователя Nokia Lumia. И угадайте, что? он совпадает с 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
Сэм Джейсон Брэддок
2

Я думаю, что ответ Михала лучший, но мы можем сделать еще один шаг и динамически загрузить Android CSS в соответствии с исходным вопросом:

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
источник
1
Зачем вам это нужно, если вы можете использовать медиа-запросы? Обнаружение устройства JS должно использоваться только для улучшения, например для добавления приглашения для установки вашего приложения. Отрисовка страницы никогда не должна полагаться на это, потому что у вас будут проблемы с производительностью и ужасное удобство использования.
camilokawerin 01
1
@camilokawerin Ваш ответ должен быть направлен автору. Я просто отвечал на его вопрос. Однако есть случаи, когда вам нужен CSS для конкретной платформы. Например, если вы хотите, чтобы визуальный стиль интерфейса соответствовал устройству.
drlarsen 05
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')
    }
})()
Филипп Сенн
источник
-3

js, ловит и iPad:

var is_mobile = /mobile|android/i.test (navigator.userAgent);
Jonny
источник
3
Не работает, потому что ловит множество устройств, а не только Android, как того требует вопрос.
NickG
1
Используйте хотя бы что-то вроде этого: /android.*(?=mobile)/i.test(navigator.userAgent); для обнаружения телефона Android. Но это регулярное выражение содержит «дорогие» квантификаторы, поэтому ответ Филиппа с двумя отдельными тестами может быть более подходящим.
Вадим П.