127 votes

Détecter un téléphone Android via Javascript / jQuery

Comment puis-je détecter que l'appareil utilisé est un Android pour un site Web mobile ?

J'ai besoin d'appliquer certains attributs css à la plateforme Android.

Merci

230voto

Michael Lumbroso Points 1342

Regardez ça : 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();
}

Editar : Comme souligné dans certains commentaires, cela fonctionnera dans 99% des cas, mais certains cas limites ne sont pas couverts. Si vous avez besoin d'une solution beaucoup plus avancée et blindée en JS, vous devriez utiliser platform.js : https://github.com/bestiejs/platform.js

5 votes

N'oubliez pas de vérifier également les tablettes Android : googlewebmastercentral.blogspot.com/2011/03/

2 votes

Il convient de noter que cela ne fonctionne pas toujours pour les appareils Android car, par exemple, les agents utilisateurs signalés par les appareils Kindle Fire HD ne contiennent pas du tout le mot "Android".

0 votes

Les différentes versions d'Android ont des fonctionnalités différentes, pourquoi ne pas ajouter la détection de la version ? Utile quand on sépare Gingerbread de Jelly Bean. La plus ancienne ne supporte pas la fonction positon : fixed, par exemple. Donc, des choses comme backstretch ne fonctionneront pas sur Gingerbread. Voir : stackoverflow.com/questions/7184573/

52voto

Michal Stefanow Points 1223

Que pensez-vous de cette phrase ?

var isAndroid = /(android)/i.test(navigator.userAgent);

El i est utilisé pour effectuer une correspondance insensible à la casse.


Technique tirée du projet de test Cordova AdMob : https://github.com/floatinghotpot/cordova-admob-pro/wiki/00.-How-To-Use-with-PhoneGap-Build

2voto

Phillip Points 9661
;(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')
    }
})()

2voto

drlarsen Points 31

Je pense que la réponse de Michal est la meilleure, mais nous pouvons aller un peu plus loin et charger dynamiquement un CSS Android comme dans la question initiale :

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);
}

1 votes

Pourquoi voudriez-vous faire cela, alors que vous pouvez utiliser les requêtes média ? La détection des appareils JS ne doit servir qu'à améliorer le site, par exemple en ajoutant une invitation à installer votre application. Le rendu de la page ne devrait jamais en dépendre car vous aurez des problèmes de performance et une expérience d'utilisation horrible.

1 votes

@camilokawerin Votre réponse doit être adressée à l'auteur. J'ai simplement fourni une réponse à sa question. Il existe cependant des cas où vous souhaitez utiliser un CSS spécifique à la plate-forme. Par exemple, si vous souhaitez que le style visuel de l'interface corresponde à l'appareil.

-2voto

jonny Points 1062

Version js, attrape aussi l'iPad :

var is_mobile = /mobile|android/i.test (navigator.userAgent);

3 votes

Cela ne fonctionne pas car cela concerne de nombreux appareils, pas seulement Android comme le demande la question.

1 votes

Utilisez au moins quelque chose comme ça : /Android.*(?=mobile)/i.test(navigator.userAgent) ; pour détecter les téléphones Android. Mais cette regex contient des quantificateurs "coûteux", donc la réponse de Philip avec 2 tests séparés est peut-être plus appropriée.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X