Rilevamento automatico del browser mobile (tramite user-agent?) [Chiuso]

Come posso rilevare se un utente sta visualizzando il mio sito Web da un browser Web mobile in modo da poter rilevare automaticamente e visualizzare la versione appropriata del mio sito Web?

Sì, leggere l'intestazione User-Agent farà il trucco.

Ci sono alcune liste fuori là di noti agenti utente di telefonia mobile in modo non c'è bisogno di ripartire da zero. Quello che ho fatto quando ho dovuto è stato quello di creare un database di agenti utente noti e archiviare gli sconosciuti quando vengono rilevati per la revisione e quindi capire manualmente cosa sono. Quest'ultima cosa potrebbe essere eccessiva in alcuni casi.

Se vuoi farlo a livello di Apache, puoi creare uno script che genera periodicamente una serie di regole di riscrittura controllando l'agente utente (o solo una volta e dimentica i nuovi agenti utente, o una volta al mese, qualunque sia adatto al tuo caso), come

RewriteEngine On

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

che sposta, ad esempio, le richieste a http: //domain/index.html in http: //domain/mobile/index.html

Se non ti piace l'approccio con uno script che ricrea periodicamente un file htaccess, puoi scrivere un modulo che controlla l'Utente Utente (non ne ho trovato uno già fatto, ma ho trovato questo esempio particolarmente appropriato ) e ottenere gli User Agent da alcuni siti per aggiornarli. Quindi puoi complicare l'approccio quanto vuoi, ma penso che nel tuo caso l'approccio precedente andrebbe bene.

Esistono script open source su Detect Mobile Browser che lo fanno in Apache, ASP, ColdFusion, JavaScript e PHP.

Solo un pensiero, ma cosa succede se hai risolto questo problema dalla direzione opposta? Invece di determinare quali browser sono mobili, perché non determinare quali browser non lo sono? Quindi codifica il tuo sito per impostazione predefinita alla versione mobile e reindirizza alla versione standard. Esistono due possibilità di base quando si guarda un browser mobile. O ha il supporto javascript o no. Quindi, se il browser non supporta javascript, passerà automaticamente alla versione mobile. Se ha il supporto JavaScript, controlla le dimensioni dello schermo. Qualunque cosa al di sotto di una certa dimensione sarà probabilmente anche un browser mobile. Qualunque cosa più grande verrà reindirizzata al layout standard. Quindi tutto ciò che devi fare è determinare se l'utente con JavaScript disabilitato è mobile o meno.
Secondo il W3C il numero di utenti con JavaScript disabilitato era di circa il 5% e di quegli utenti la maggior parte lo ha disattivato, il che implica che sanno effettivamente cosa stanno facendo con un browser. Sono gran parte del tuo pubblico? Altrimenti, non preoccuparti per loro. In tal caso, qual è lo scenario peggiore? Hai quegli utenti che navigano nella versione mobile del tuo sito, e questa è una buona cosa.

Ecco come lo faccio in JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

Guarda un esempio su www.tablemaker.net/test/mobile.html dove triplica la dimensione del carattere sui telefoni cellulari.

Il mio meccanismo preferito di rilevamento del browser mobile è WURFL . Viene aggiornato frequentemente e funziona con tutte le principali piattaforme di programmazione / linguaggio.

Hai preso in considerazione l'utilizzo di media query css3? Nella maggior parte dei casi è possibile applicare alcuni stili CSS specificamente per il dispositivo di destinazione senza dover creare una versione mobile separata del sito.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

Puoi impostare la larghezza come preferisci, ma 1025 catturerà la vista orizzontale dell'iPad.

Ti consigliamo anche di aggiungere il seguente meta tag alla tua testa:

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

Dai un'occhiata a questo articolo su HTML5 Rocks per alcuni buoni esempi

per 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>

Il file del browser del dispositivo mobile è un ottimo modo per rilevare broswer mobili (e altri) per progetti ASP.NET: http://mdbf.codeplex.com/

È possibile rilevare i client mobili semplicemente tramite navigator.userAgente caricare script alternativi basati sul tipo di client rilevato come:

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

    });

È possibile controllare la stringa User-Agent. In JavaScript, è davvero facile, è solo una proprietà dell'oggetto navigatore.

var useragent = navigator.userAgent;

Puoi verificare se il dispositivo è iPhone o Blackberry in JS con qualcosa di simile

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

se isIphone è vero stai accedendo al sito da un Iphone, se isBlackBerry stai accedendo al sito da un Blackberry.

È possibile utilizzare il plug-in "UserAgent Switcher" per Firefox per testarlo.

Se anche tu sei interessato, potrebbe valerne la pena dare un'occhiata al mio script "redirection_mobile.js" ospitato su github qui https://github.com/sebarmeli/JS-Redirection-Mobile-Site e puoi leggere maggiori dettagli in uno dei il mio articolo qui:

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

Questo esempio funziona in asp.net

Non hai detto quale lingua stai usando. Se è Perl, allora è banale:

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
}

Sì, l'agente utente viene utilizzato per rilevare i browser mobili. Ci sono molti script gratuiti disponibili per verificare questo. Ecco uno di questi codici php che ti aiuterà a reindirizzare gli utenti di dispositivi mobili a siti Web diversi.

Ho messo questa demo con script ed esempi inclusi insieme:

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

Questo esempio utilizza le funzioni php per il rilevamento dell'agente utente e offre l'ulteriore vantaggio di consentire agli utenti di indicare una preferenza per una versione del sito che in genere non sarebbe quella predefinita in base al browser o al tipo di dispositivo. Questo viene fatto con i cookie (mantenuti usando php sul lato server invece di JavaScript).

Assicurati di controllare il link per il download nell'articolo per gli esempi.

Spero ti diverta!

MobileESP ha hook PHP, Java, APS.NET (C #), Ruby e JavaScript. ha anche la licenza Apache 2, quindi gratuita per uso commerciale. La cosa fondamentale per me è che identifica solo i browser e le piattaforme, non le dimensioni dello schermo e altre metriche, il che lo rende bello un po 'piccolo.

C'è una nuova soluzione che utilizza Zend Framework. Inizia dal collegamento a Zend_HTTP_UserAgent:

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