web-dev-qa-db-fra.com

Détection automatique du navigateur mobile (via user-agent?)

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?

htmlwindows-mobilebrowseruser-agent
290
TeddyTom

Oui, la lecture de l'en-tête User-Agent fera l'affaire.

Il existe des listessorties parmi les agents d'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 créer 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 utilisateurs, ou une fois par mois, comme vous le souhaitez), comme

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

ce qui déplacerait, par exemple, les demandes à http: //domain/index.html à http: //domain/mobile/index.html

Si vous n'aimez pas l'idée de faire recréer périodiquement un fichier htaccess par un script, 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 demandez aux agents utilisateurs de certains sites de 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 irait bien.

91
Vinko Vrsalovic

Il existe des scripts open source sur Detect Mobile Browser qui le font sous Apache, ASP, ColdFusion, JavaScript et PHP.

126
Chad Smith

Juste une pensée mais que se passe-t-il si vous avez travaillé ce problème de la direction opposée? 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 sur 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é est d’environ 5% et la plupart des utilisateurs 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? Vous avez ces utilisateurs qui parcourent la version mobile de votre site, et c'est une bonne chose.

33
midsever

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.

31
Ed Poor

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 méta suivante à votre tête:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Découvrez cet article sur HTML5 Rocks pour quelques bons exemples

17
Cory

Mon mécanisme de détection de navigateur mobile préféré est WURFL . Il est mis à jour fréquemment et fonctionne avec toutes les principales plateformes de programmation/langage.

17
Pablo Santa Cruz

pour Android, IPHONE, IPAD, BLACKBERRY, Palm, CE WINDOWS, 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>
13
Jorgesys

Le fichier du navigateur de périphérique mobile est un excellent moyen de détecter les projets de recherche mobiles (et autres) pour les projets ASP.NET: http://mdbf.codeplex.com/

6
mjf

Vous pouvez détecter les clients mobiles simplement via navigator.userAgent et charger d'autres scripts en fonction du type de client détecté, en tant que:

 $(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
    }

    });
5
sohel khalifa

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 un Blackberry sous JS avec

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 le plug-in "UserAgent Switcher" pour firefox pour le tester.

Si vous êtes également intéressé, vous pouvez consulter mon script "redirection_mobile.js" hébergé sur github ici https://github.com/sebarmeli/JS-Redirection-Mobile-Site et vous pouvez lire plus de détails dans l'un de mes articles ici:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

4
sebarmeli
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

Cet exemple fonctionne dans asp.net

4
shiv

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
}
3
Nigel Horne

J'ai mis cette démo avec les scripts et les exemples inclus ensemble:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

Cet exemple utilise des fonctions php pour la détection d'agent utilisateur et offre l'avantage supplémentaire de permettre aux utilisateurs d'indiquer 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. Ceci est fait avec des cookies (maintenus en utilisant php sur le serveur plutôt que javascript.)

Assurez-vous de vérifier le lien de téléchargement dans l'article pour les exemples.

Espérons que vous apprécierez!

0
Michael Lynn

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 tel code php qui vous aidera à rediriger les utilisateurs mobiles vers un site Web différent.

0
Shoban

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, pas la taille de l’écran ni d’autres mesures, ce qui en fait une petite taille.

0
rob