Détection automatique du navigateur mobile (via user-agent?) [Fermé]
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je détecter si un utilisateur consulte mon site Web à partir d'un navigateur Web mobile afin que je puisse ensuite détecter et afficher automatiquement la version appropriée de mon site Web?
La solution
Oui, la lecture de l'en-tête User-Agent fera l'affaire.
Il existe des listes parmi d'agents utilisateurs mobiles connus, vous n'avez donc pas besoin de recommencer à zéro. Ce que j’ai fait quand j’ai eu à faire est de construire une base de données d’agents utilisateurs connus et de stocker les inconnus au fur et à mesure de leur détection, puis de déterminer manuellement ce qu’ils sont. Cette dernière chose pourrait être exagérée dans certains cas.
Si vous voulez le faire au niveau Apache, vous pouvez créer un script qui génère périodiquement un ensemble de règles de réécriture vérifiant l'agent utilisateur (ou juste une fois et oubliez les nouveaux agents utilisateur, ou une fois par mois, selon votre cas. ), comme
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
qui déplacerait, par exemple, les demandes de http: //domain/index.html vers http: //domain/mobile/index.html
Si vous n’aimez pas l’approche voulant qu’un script recrée périodiquement un fichier htaccess, vous pouvez écrire un module qui vérifie l’agent utilisateur (je n’en ai pas trouvé un déjà créé, mais j’ai trouvé cela particulièrement approprié exemple ) et obtenez les agents utilisateurs de certains sites pour les mettre à jour. Ensuite, vous pouvez compliquer l’approche autant que vous le souhaitez, mais je pense que dans votre cas, l’approche précédente serait satisfaisante.
Autres conseils
Il existe des scripts open source sur Détecter le navigateur mobile qui utilisent cette fonctionnalité sous Apache, ASP, ColdFusion, JavaScript et PHP.
Juste une pensée mais que se passerait-il si vous régliez ce problème dans le sens opposé? Plutôt que de déterminer quels navigateurs sont mobiles, pourquoi ne pas déterminer quels navigateurs ne le sont pas? Codez ensuite votre site sur la version mobile par défaut et redirigez-le vers la version standard. Il y a deux possibilités de base quand on regarde un navigateur mobile. Soit il prend en charge javascript ou il ne le fait pas. Donc, si le navigateur ne supporte pas le javascript, il utilisera par défaut la version mobile. Si JavaScript est pris en charge, vérifiez la taille de l'écran. Toute taille inférieure à une certaine taille sera probablement également un navigateur mobile. Tout ce qui est plus grand sera redirigé vers votre mise en page standard. Il vous suffit ensuite de déterminer si l'utilisateur avec JavaScript désactivé est mobile ou non.
Selon le W3C, le nombre d'utilisateurs avec JavaScript désactivé était d'environ 5% et la plupart d'entre eux l'ont désactivé, ce qui implique qu'ils savent réellement ce qu'ils font avec un navigateur. Sont-ils une grande partie de votre public? Sinon, ne vous inquiétez pas pour eux. Si oui, quel est le pire des scénarios? Ces utilisateurs naviguent sur la version mobile de votre site, ce qui est une bonne chose.
Voici comment je le fais en JavaScript:
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
Voir un exemple sur www.tablemaker.net/test/mobile.html où il triple la taille de la police sur les téléphones mobiles.
Mon mécanisme de détection des navigateurs mobiles préféré est WURFL . Il est mis à jour fréquemment et fonctionne avec toutes les plateformes de programmation / langage majeures.
Avez-vous envisagé d’utiliser des requêtes multimédia css3? Dans la plupart des cas, vous pouvez appliquer des styles css spécifiquement pour le périphérique ciblé sans avoir à créer une version mobile distincte du site.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
Vous pouvez définir la largeur de votre choix, mais 1025 capture la vue paysage de l'iPad.
Vous voudrez également ajouter la balise META suivante à votre tête:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Découvrez cet article dans HTML5 Rocks pour quelques bons exemples
pour ANDROID, IPHONE, IPAD, BLACKBERRY, PALM, FENÊTRES CE, PALM
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>
Le fichier du navigateur de périphérique mobile est un excellent moyen de détecter les réponses mobiles (et autres) des projets ASP.NET: http: //mdbf.codeplex.com/
Vous pouvez détecter les clients mobiles simplement via navigator.userAgent , et charger d'autres scripts en fonction du type de client détecté sous la forme suivante:
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
Vous pouvez vérifier la chaîne User-Agent. En JavaScript, c'est très simple, il ne s'agit que d'une propriété de l'objet de navigation.
var useragent = navigator.userAgent;
Vous pouvez vérifier si l'appareil est un iPhone ou Blackberry sous JS avec quelque chose comme
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
Si isIphone est vrai, vous accédez au site à partir d'un iPhone, si isBlackBerry vous accédez au site à partir d'un Blackberry.
Vous pouvez utiliser "UserAgent Switcher". plugin pour firefox pour tester cela.
Si vous êtes également intéressé, vous pouvez consulter le script "redirection_mobile.js" hébergé sur github ici https://github.com/sebarmeli/JS- Redirection-Mobile-Site et vous pourrez lire plus de détails dans l'un de mes articles ici:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
Cet exemple fonctionne en asp.net
Vous n'avez pas dit quelle langue vous utilisez. Si c'est Perl, alors c'est trivial:
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
Oui user-agent est utilisé pour détecter les navigateurs mobiles. Il y a beaucoup de scripts gratuits disponibles pour vérifier cela. Voici un de ces code php qui vous aideront à rediriger les utilisateurs de mobiles vers un autre site Web.
Je mets cette démonstration avec des scripts et des exemples inclus ensemble:
http: // www. mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
Cet exemple utilise les fonctions php pour la détection des agents utilisateurs et offre l’avantage supplémentaire de permettre aux utilisateurs d’énoncer une préférence pour une version du site qui ne serait généralement pas la valeur par défaut en fonction de leur navigateur ou du type de périphérique. Cela se fait avec des cookies (maintenus en utilisant php côté serveur plutôt que javascript.)
Assurez-vous de vérifier le lien de téléchargement dans l'article pour les exemples.
J'espère que vous apprécierez!
MobileESP possède des points d'ancrage PHP, Java, APS.NET (C #), Ruby et JavaScript. Il possède également la licence Apache 2, donc gratuite pour un usage commercial. Ce qui est important pour moi, c’est qu’il n’identifie que les navigateurs et les plates-formes, et non la taille de l’écran et d’autres mesures, ce qui en fait une petite taille.
Il existe une toute nouvelle solution utilisant Zend Framework. Commencez par le lien vers Zend_HTTP_UserAgent:
