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
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
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
N'oubliez pas de vérifier également les tablettes Android : googlewebmastercentral.blogspot.com/2011/03/
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".
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/
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
;(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')
}
})()
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);
}
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.
@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.
Cela ne fonctionne pas car cela concerne de nombreux appareils, pas seulement Android comme le demande la question.
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.