Détection automatique du navigateur mobile (via l'agent utilisateur?) [Fermé]

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?

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

Il y a des listes sur il des agents utilisateurs mobiles connus de sorte que vous n'avez pas besoin de repartir à zéro. Ce que j'ai fait lorsque je devais le faire, c'est de créer une base de données d'agents utilisateurs connus et de stocker les inconnues lors de leur détection pour révision, puis de déterminer manuellement ce qu'elles 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, selon votre cas), comme

RewriteEngine On

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

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

Si vous n'aimez pas l'approche consistant à 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à fait, mais j'ai trouvé cet exemple particulièrement approprié ) et obtenir 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 conviendrait.

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

Juste une pensée mais que se passe-t-il si vous travaillez ce problème dans 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? Ensuite, codez votre site par défaut sur la version mobile et redirigez-le vers la version standard. Il existe deux possibilités de base lorsque vous regardez un navigateur mobile. Soit il prend en charge javascript, soit il ne l'est pas. Donc, si le navigateur n'a pas de support javascript, il sera par défaut à la version mobile. S'il prend en charge JavaScript, vérifiez la taille de l'écran. Tout ce qui est inférieur à une certaine taille sera probablement également un navigateur mobile. Tout ce qui est plus grand sera redirigé vers votre mise en page standard. Ensuite, tout ce que vous devez faire est 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 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 en faites pas. Si oui, quel est le pire des cas? Vous avez ces utilisateurs qui parcourent la version mobile de votre site, et c'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 police sur les téléphones mobiles.

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.

Avez-vous envisagé d'utiliser des requêtes multimédias CSS3? Dans la plupart des cas, vous pouvez appliquer certains styles CSS spécifiquement pour l'appareil 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 comme vous le souhaitez, mais le 1025 capturera 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">

Consultez cet article sur HTML5 Rocks pour de bons exemples

pour ANDROID, IPHONE, IPAD, BLACKBERRY, PALM, WINDOWS 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 de navigateur de périphérique mobile est un excellent moyen de détecter les navigateurs mobiles (et autres) pour les projets ASP.NET: http://mdbf.codeplex.com/

Vous pouvez détecter les clients mobiles simplement via navigator.userAgent, et charger des scripts alternatifs basés sur le type de client détecté comme:

 $(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 vraiment facile, c'est juste une propriété de l'objet navigateur.

var useragent = navigator.userAgent;

Vous pouvez vérifier si l'appareil iPhone ou Blackberry dans 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 le plugin "UserAgent Switcher" pour Firefox pour tester cela.

Si vous êtes également intéressé, cela peut valoir la peine de 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 des mon article ici:

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

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

Cet exemple fonctionne dans 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, l'agent utilisateur est utilisé pour détecter les navigateurs mobiles. Il existe de nombreux scripts gratuits disponibles pour vérifier cela. Voici un tel code php qui vous aidera à rediriger les utilisateurs mobiles vers différents sites Web.

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

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 type d'appareil. Cela se fait avec des cookies (maintenus en utilisant php côté serveur par opposition à javascript.)

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

Espérons que vous apprécierez!

MobileESP dispose de crochets PHP, Java, APS.NET (C #), Ruby et JavaScript. il possède également la licence Apache 2, donc gratuite pour une utilisation commerciale. L'essentiel pour moi est qu'il n'identifie que les navigateurs et les plates-formes, pas les tailles d'écran et autres mesures, ce qui le maintient bien petit.

Il existe une toute nouvelle solution utilisant Zend Framework. Commencez par le lien vers Zend_HTTP_UserAgent:

http://framework.zend.com/manual/en/zend.http.html