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:
- http://www.mobile-phone-specs.com/user-agent-browser/0/
- http://www.davidonzo.com/public/file/mobile-user-agent.txt
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:
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…)
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://mobi.tuosito.it [R=301]
24 comments
Peterborto
26 Giugno 2011 at 19:36
Io ne uso un altro.. domani posto..
Cut&Pasteh
27 Giugno 2011 at 10:51
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
27 Giugno 2011 at 11:13
suggerisco Detect mobile browser http://detectmobilebrowser.com/ anche se un pò datato.. opensouce e in più linguaggi..
La pecca è che bisogna ogni tanto aggiornarlo…
Aurora Dellerba
28 Giugno 2011 at 0:01
grazie per la dritta e grazie anche a peterborto, sicuramente detectmobilebrowser.com è una risorsa abbastanza valida 😉
Mario Concina
2 Luglio 2011 at 9:51
@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
2 Luglio 2011 at 19:23
mi serviva, grazie ad entrambi 😉
SilvioM
2 Luglio 2011 at 19:24
Plugin per wp che fanno questo?
Cut&Pasteh
4 Luglio 2011 at 22:26
@Mario: in effetti non è il massimo della vita, forse è meglio uno script con gli user agent.
SilvioM
12 Luglio 2011 at 9:07
grazie!
Gabriele Barzaghi
7 Novembre 2011 at 14:35
Come faccio ad attivarlo anche per Ipad tramite Javascript?
Mario Concina
9 Novembre 2011 at 21:42
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
15 Ottobre 2012 at 15:56
è 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
3 Dicembre 2012 at 17:33
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 🙂
Ivano stefanelli
17 Dicembre 2012 at 16:23
Qualcuno ha mai usato Simple-Grid?
http://thisisdallas.github.com/Simple-Grid/
O questo SimpleGrid?
http://www.avelikov.net
francesco
16 Febbraio 2013 at 0:45
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
Mario Concina
22 Febbraio 2013 at 12:01
Dovresti provare uno di questi script che fanno esattamente ciò che tu stai cercando.
francesco
22 Febbraio 2013 at 14:07
Grazie Mario! Però non vedo gli script, o ti riferisci a qualcosa di scritto nei post precedenti?
Grazie ancora per il tuo tempo!
Michele
4 Giugno 2013 at 23:01
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
22 Ottobre 2013 at 10:21
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?
Mario Concina
22 Ottobre 2013 at 10:37
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?
Alberto
22 Ottobre 2013 at 10:46
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?
vincenzo
28 Luglio 2015 at 12:51
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!!
Mario Concina
27 Ottobre 2015 at 15:26
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