MobileDetect: Come rilevare i dispositivi mobili?
Negli ultimi tempi ho trattato l’argomento dei dispositivi mobili ed in particolare quello del nuovissimo framework jQuery Mobile (giunto nel frattempo alla versione beta).
Mi é stato chiesto da più parti un sistema per rilevare questi dispositivi in modo da poter reindirizzare l’utente ad una variante del sito specifica per il relativo dispositivo.
Ho iniziato dunque a lavorare su una libreria che svolgesse al meglio questo compito ed ho pure aperto un post nel nostro forum nel quale é possibile inviare nomi di user-agent di dispositivi mobili.
Oggi Your Inspiration Web rilascia la versione beta della libreria mobileDetect che potete scaricare e ridistribuire a piacimento.
DownloadFunzionamento
mobileDetect rileva l’user-agent della richiesta e verifica se é contenuto nella lista dei nomi dei dispositivi mobili. Questa lista é espressa in forma di file xml ed hostata su google code. In questo modo non sarà necessario aggiornare la libreria ad ogni aggiornamento della lista.
Naturalmente questa lista non ha la pretesa di essere completa e da solo non posso fare molto. E’ per questo motivo che chiedo l’aiuto di tutta la community nel contribuire a migliorarla e correggerla. Se siete a conoscenza di ulteriori nomi di device o se ritenete che la lista contenga inesattezze, comunicatelo nell’apposita sezione sul forum.
In questi casi la collaborazione é importantissima. Ovviamente sarete inserirvi nella lista dei contributors.
Utilizzo
L’utilizzo di questa libreria é semplicissimo. Basta includerla per avere a disposizione l’oggetto $mobileDetect al quale fanno riferimento 3 proprietà ed un metodo:
- isMobile: Contiene TRUE se l’agent é nella lista dei dispositivi mobili (FALSE se non lo é)
- isTouch: Contiene TRUE se si tratta di un dispositivo mobile provvisto di touch screen
- mobileName: Contiene il nome del dispositivo
- mobileDetectInfo(): Questo metodo può essere invocato in fase di sviluppo e manda a video tutte le informazioni sulla lista dei dispositivi (tipo phpinfo() per intenderci).
Esempi
Esempio 1
include 'mobileDetect.class.php';
if($mobileDetect->isMobile)
{
header("Location: http://www.miosito.com/mobile");
}
Esempio 2
include 'mobileDetect.class.php';
if($mobileDetect->isMobile)
{
if($mobileDetect->isTouch)
{
echo 'il dispositivo ' . $mobileDetect->mobileName . ' é touch screen';
}
else
{
echo 'il dispositivo ' . $mobileDetect->mobileName . ' non é touch screen';
}
}
Utilizzare una lista personalizzata
E’ anche possibile utilizzare una lista personalizzata. Se ad esempio volessi considerare solo alcuni dispositivi basta creare un file xml con la stessa struttura ed inserirvi solo quello che é necessario. In questo caso il file dovrà essere salvato sul proprio server ed il suo URL verrà passato come argomento del costruttore a riga 176 del file mobileDetect.class.php.
$mobileDetect = new mobileDetect(http://www.your-site.com/path-to-file);
Road map
Sto già lavorando alla prima release candidate ma anche qui chiedo l’aiuto della community in forma di suggerimenti, impressioni, segnalazioni di errori.
Una cosa che certo sarebbe interessante inserire é una nuova proprietà che contenga la risoluzione dello schermo del dispositivo (anche se sarà molto difficile).
Conclusione
Che dire ancora? Forza ragazzi, metteteci del vostro! Siamo tantissimi ed abbiamo la possibilità di realizzare un progetto veramente interessante.
Nei prossimi giorni anche YIW andrà in vacanza, quindi colgo l’occasione per augurarvi una ottima estate ed arrivederci a settembre!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
18 commenti
Trackback e pingback
-
Raccolta di articoli della settimana 17/7/2011 | Saverio Gravagnola
[...] Come rilevare i dispositivi mobili (Your Inspiration [...]
Ciao Maurizio e grazie per i sempre ottimi materiali che ci metti a disposizione.
Personalmente mi è capitato soltanto una volta di sviluppare un sito mobile e ho utilizzato un controllo in javascript sulla larghezza della finestra.
Penso che dal prossimo cercherò di utilizzarli combinati alla tua classe!
Grazie!
Ciao lxn e grazie, spero che troverai mobileDetect un valido aiuto.
molto interessante! soprattutto l’isTouch.
potrebbe essere un idea metterla su github!
Ciao Luca.
Infatti, é molto importante sapere se il dispositivo sia touch screen perché come abbiamo detto più volte, questo comporta delle differenze notevoli nella progettazione del layout
Grande Maurizio, non vedo l’ora di provarla (attualmente mi trovo in Toscana per lavoro e sono senza il mio fido computer :( ) e, magari, di contrtibuire
Ciao tiziano. Benvenuti siano tutti i contributors :-)
p.s come fai a vivere senza computer?
Ottimo lavoro. Perché non includerla nel pacchetto di StandardLib? Sarebbe molto interessante come funzione del framework :-)
Ciao Johnny,
sL é ferma per mancanza di tempo anche se sarebbero praticamente già pronti numerosi improvement :-( . Comunque si. Potrebbe diventare un modello di sL
Molto interessante proprio quello che cercavo solo che non è stato inserito l’iPad nella lista dei Mobile.. Vero è che un ipad può visualizzare siti con formattazione web in modo perfetto ma è comunque un dispositivo portatile e touch che può preferire layout particolari.
In ogni caso, nessun problema in quanto hai reso modificabile l’XML. Ottimo lavoro!
Grazie.
Gabriele
Ciao Gabriele e grazie.
in effetti ho pensato se includere o meno l’iPad. Poi, come hai già detto tu ho considerato che in fondo non necessita di un layout particolare.
Lavoravo a qualcosa di simile, basato però su una tabella MySQL e non su XML.
Ho mischiato le 2 cose, modificando la classe in modo che possa lavorare sia con xml che con db (ho aggiundo un secondo parametro ‘use_mysql’)
Se il collegamento al database fallisce per qualsiasi ragione la classe passa in automatico al metodo xml.
Ho poi aggiunto l’operatore @ prima delle funzioni più a rischio errore, considerando che la classe sarà usata prima del corpo di un sito, meglio evitare di mandare in output errori.
Ho anche aggiunto 2 metodi, uno per creare la tabella mysql e uno per popolarla a partire da un file xml (di default quello caricato da te su google code). I 2 metodi sono implementati insieme in un file ‘install.php’.
Ho anche aggiunto un file ‘config.php’ dove attualmente vanno solo messi i dati di connessione mysql in caso si voglia utilizzare quella anzicché l’xml.
Per finire ho aggiunto 2 proprietà, ‘width’ ed ‘height’ rispettivamente per risoluzione orizzontale e verticale, se nell’xml (o nella tabella) sono aggiunti per un device vengono valorizzati, altrimenti no.
Il metodo ‘mobileDetectInfo’ prende la prima parte (informazioni su autore, versione, ecc..) sempre dall’xml su google code, mentre le informazioni sui device vengono prese dall’xml o dalla tabella mysql a seconda del metodo impostato per la classe.
Il link dove trovare la classe modificata da me è:
http : // www . bazuzu . it / shared / mobileDetect-1_0_0_1 . zip
Davvero notevole, grazie.
Io utilizzo un parametro javascript per determinare la dimensione del video
Qui trovate il frammento di codice con la spiegazione.
http://www.makervi.it/?titolo=come-determinare-a-priori-le-dimensioni-dello-schermo&info=53
Ora mi accingo ad utilizzare la classe mobiledetect
Vi farò sapere
Grazie
Ciao YIW,
non ho capito dove inserire l’esempio 1:
————————
include ‘mobileDetect.class.php’;
if($mobileDetect->isMobile)
{
header(“Location: http://www.miosito.com/mobile“);
}
————————
Nella head dell’index.html del mio sito?
Va tra … , giusto?
Grazie per l’aiuto.
a me da questo errore:
Fatal error: Cannot redeclare class mobileDetect in /web/htdocs/www.sito.it/home/mobileDetect.class.php on line 39
Ho trovato quest’altro codice e funziona alla grande!