Come determinare l’utilizzo di dispositivi mobili con jQuery

Per offrire la miglior esperienza possibile agli utenti che navigano sul nostro sito web, è necessario ottimizzarne le pagine, rendendole responsive. In tal modo potremo assicurare un’ottima visualizzazione sia su dispositivi desktop che mobile.

Per far questo è sufficiente l’uso delle media query all’interno dei fogli stile e quindi non dovrebbe essere necessario conoscere la tipologia di dispositivo utilizzata.

In alcuni casi però, questa informazione potrebbe servirci. Ad esempio, potremmo avere l’esigenza di eseguire uno script solamente se si sta visualizzando il sito da un dispositivo touchscreen, o viceversa.

In un precedente articolo abbiamo visto come determinare l’orientamento dei dispositivi mobili con jQuery, verticale (portrait) o orizzontale (landscape).

Ora vedremo come sapere se l’utente che visita le nostre pagine stia effettivamente utilizzando un computer/portatile oppure un telefonino/tablet.

Il modo più semplice per fare questo “check” del dispositivo è probabilmente quello di utilizzare Modernizr, una comoda e utile libreria Javascript che contiene una serie di controlli preimpostati relativi a browser e dispositivi.

Possiamo quindi scaricare il file dal sito modernizr.com oppure includerlo direttamente da cdnjs.

Includi modernizr.js

[code_snippet y=”2016″ name=”determinare-utilizzo-dei-dispositivi-mobili” id=”1″]

Una volta incluso il file, con una semplice riga Javascript saremo in grado di sapere se l’utente sta guardando il sito da un dispositivo mobile o meno.

Esegui il controllo del dispositivo

[code_snippet y=”2016″ name=”determinare-utilizzo-dei-dispositivi-mobili” id=”2″]