RnCStudio...creazionesiticagliari.it

Come rilevare i dispositivi mobili con jQuery

Scritto da Administrator (admin) il 02/10/2011
Il Blog di RnCStudio >> JavaScript, jQuery, Ajax

Navigando nel web, mi sono imbattuto in un sito veramente interessante, specialmente per chi lavora nel campo del web design,Your Inspiration Web. Tra i vari articoli, ne ho trovato uno molto utile per chi ha un sito ottimizzato anche per smartphone. In questo caso, può essere utile l'utilizzo del framework jQuery Mobile, che riconosce se l'utente sta utilizzando uno smartphone ed esegue un redirect verso il nostro sito per smartphone. 

Funzionamento

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.
La lista non è completa, ma si può contribuire a completarla ed eventualmente correggerla attraverso l’apposita sezione sul forum di Your Inspiration Web 

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 si volesse 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.ilmiosito.com/path-to-file); 

 

Scarica il file

 

[Fonte: Your Inspiration Web]

Ultima modifica: 02/10/2011 alle 09:26


Torna indietro