Redirect per dispositivi Mobile e lista user agent

Redirect per dispositivi Mobile e lista user agent

7019
26
CONDIVIDI

Sempre più sono le versioni delle pagine web navigabili da cellulare, veri e propri mini-siti sgombri di immagini pesanti e testi lunghissimi che badano all’informazione essenziale, motivo per il quale l’utente consulta la pagina da uno smartphone. E’ una buona norma di programmazione in questi casi verificare con quale dispositivo l’utente si collega (esempio www.marioconcina.it) ed effettuare un redirect alla versione mobile (esempio mobi.marioconcina.it) nel caso in cui il device sia uno smartphone. In questo articolo mostrerò una lista dettagliata di devices e successivamente degli script di differente linguaggio che effettuano il redirect.

Liste di mobile devices

Spulciando per il web ho raccolto le migliori risorse che in questa materia offrono un elenco abbastanza dettagliato di user agent per dispositivi mobili:

Script di redirect

Questi script, invece, contengono una lista di user agent per device mobili ed effettuano un redirect ad un url da inserire.

Scaricare il file di redirect dalla risorsa indicata.

Nel caso in cui il redirect sia Javascript basterà includere questo file e subito dopo aggiungere questo pezzo di codice per effettuare il redirect:

1
2
3
4
5
6
<script type="text/javascript"> 
   var deviceWap = 'deviceWap';
   var deviceWml = 'deviceWml';
   if(getQueryString('redirect') != 'no' && DetectMobileLong())
       document.location = 'http://mobi.miosito.it'; //URL da modificare per il redirect
</script>

E’ possibile effettuare un redirect 301 anche via htaccess utilizzando la seguente condizione, copiandola e replicandola per ogni browser che contiene la stringa indicata (ad esempio iPhone, Symbian, BlackBerry, ecc…)

1
2
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobi.tuosito.it [R=301]
  • Io ne uso un altro.. domani posto..

  • Cut&Pasteh

    Ottime le risorse. Forse, però dimentichi che si potrebbe con javascript misurare la larghezza dello schermo ed effettuare un redirect:

    if(screen.width < 300) location.href = 'sito';

  • peterborto

    suggerisco Detect mobile browser http://detectmobilebrowser.com/ anche se un pò datato.. opensouce e in più linguaggi..
    La pecca è che bisogna ogni tanto aggiornarlo…

  • emporioDev

    ottimo, grazie!!!

  • Aurora Dellerba

    grazie per la dritta e grazie anche a peterborto, sicuramente detectmobilebrowser.com è una risorsa abbastanza valida 😉

  • Mario Concina

    @Cut&Pasteh
    la soluzione che hai illustrato è meno efficace rispetto il riconoscimento dello user agent poichè una finestra di un browser potrebbe anche aprirsi ridimensionata anzichè a pieno schermo e quindi questo causerebbe un redirect anche nel caso in cui stessi navigando da un pc.

  • francesco

    mi serviva, grazie ad entrambi 😉

  • SilvioM

    Plugin per wp che fanno questo?

  • Cut&Pasteh

    @Mario: in effetti non è il massimo della vita, forse è meglio uno script con gli user agent.

  • Emporiodev

    SilvioM,
    per wordpress c’è WP-TOUCH. E’ un plugin che effettua il redirect automatico attraverso un altro tema mobile definito sempre in wp; ovviamente, però bisogna un pò perderci la testa perchè non è del tutto “intuitivo” e soprattutto c’è la versione PRO che è a pagamento e costa un bel pò.

    • SilvioM

      grazie!

  • Come faccio ad attivarlo anche per Ipad tramite Javascript?

    • Mario Concina

      basta sostituire la stringa “iPad” con quelle già presenti negli esempi, con .htaccess una cosa del genere:

      RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
      RewriteRule ^(.*)$ http://mobi.tuosito.it [R=301]
  • carloquattro

    è possibile con javascript il redirect distinto al cellulare (1) e al tablet (2)? utilizzando cioè 2 siti distinti e diversi? grazie per …………..la risposta

  • Luisa

    Come faccio a fare in modo che
    i cellulari vadano ad un sito e SOLO i tablet vadano ad un altro sito?
    ho creato una versione per i tablet e una per i cellulari…
    grazie mille :)

  • Qualcuno ha mai usato Simple-Grid?
    http://thisisdallas.github.com/Simple-Grid/
    O questo SimpleGrid?
    http://www.avelikov.net

  • francesco

    Buongiorno, scusate ma non riesco a trovare risposta su google (!!) se io volessi che il redirect non fosse forzato, ma che fosse proposto (solo) agli utenti di smartphone e tablet, lasciando però la possibilità di accedere al sito principale, cosa dovrei fare?
    Grazie mille

    • Dovresti provare uno di questi script che fanno esattamente ciò che tu stai cercando.

    • francesco

      Grazie Mario! Però non vedo gli script, o ti riferisci a qualcosa di scritto nei post precedenti?
      Grazie ancora per il tuo tempo!

  • Salve,
    Ho realizzato un sito su Wix, poi acquistato domain nane su Aruba con opzione redirect al sito wix. Su pc tutto ok ma nn si accede da smartphone… C’è una soluzione semplice? Cordiali saluti e grazie

  • Alberto

    Mario scusa ma non funziona… ho provato il js sul mio sito e niente!
    La cosa strana è che ho provato a navigare il tuo da un smartphone Android e da un iPod e non mi manda alla parte mobile.
    Che succede?

    • Ciao Alberto,
      questo è un articolo del 2011, nel frattempo il mio blog ha subito un restyling grafico che non supporta più la versione mobile dedicata ma è
      responsive. Tuttavia il javascript è ancora funzionante, hai inserito anche il codice seguente? Con quale devices navighi?

      <script type="text/javascript"> 
         var deviceWap = 'deviceWap';
         var deviceWml = 'deviceWml';
         if(getQueryString('redirect') != 'no' && DetectMobileLong())
             document.location = 'http://mobi.miosito.it'; //URL da modificare per il redirect
      </script>
    • Alberto

      Si l’ho inserito, ed ovviamente ho anche caricato il js allo stesso livello /
      Navigo con HTC One Android e iPod Touch
      Grazie!

  • Pingback: E' possibile cambiare la visualizzazione di un sito da mobile rispetto che da computer?()

  • ciao Mario, sto realizzando questo sito web per il gioco del fantacalcio tra amici e molti amici miei mi hanno detto che vogliono seguirlo da smartphone ho visto il tuo codice js e ti volevo chiedere ma è da inserire in tutte le pagine del sito oppure in un file esterno e poi fare il richiamo in ogni pagina??
    grazie!!

    • il controllo deve essere effettuato in tutte le pagine, altrimenti se raggiungo una pagina interna senza passare dalla home page, visualizzerò sempre la versione desktop