Qual è il modo migliore per verificare se un client è un dispositivo mobile con JavaScript? Lo scopriamo in questo articolo!
In linea generale, sappiamo di poter agire sulle pagine web del nostro applicativo tramite le query CSS in modo tale da adattarle ai client mobile: “@media attribute” per esempio.
In questo caso però, vogliamo capire come sia possibile verificare se il client è davvero un dispositivo mobile lato JavaScript, così da poter eventualmente operare non solo a livello di design, ma anche di funzionalità.
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Espressioni regolari e User Agent
Possiamo utilizzare la variabile “user agent” per poter ovviare a ciò, in aggiunta ad una espressione regolare che vada a verificare se il device corrisponde ad uno dei possibili sistemi operativi mobili oppure tipologia di dispositivo.
Separiamo un attimo le due cose. Vediamo i dispositivi:
iPhone|iPad|iPod|BlackBerry
Converrai con me che sono parecchio limitati ad alcuni casi possibili.
Come facciamo a gestire i dispositivi Android? Quelli Windows?
Dobbiamo agire anche a livello di sistema operativo come dicevo prima:
Android|webOS|IEMobile|Opera Mini
Ora dobbiamo unire il tutto:
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/
E metterlo in una condizione:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.informatico(navigator.userAgent) ) {
// Il tuo codice
}
Perciò, questo è il primo modo per verificare se un client è un dispositivo mobile attraverso l’uso di JavaScript.
Ma chiaramente non è l’unico.
Espressioni regolari e Browser Device
Grazie a jQuery possiamo agire a livello di variabili legate al browser.
La variabile “browser” messa a disposizione da jQuery permette di ottenere il tipo di device che sta visitando la nostra pagina.
Quindi, prendiamo l’espressione regolare vista prima e uniamo l’utile al dilettevole:
$.browser.device = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.informatico(navigator.userAgent));
C’è da fare una precisazione a riguardo. Questo metodo purtroppo è stato rimosso dalla versione 1.9.1 di jQuery e qui ti lascio i dettagli in merito.
Ma allora cosa fare? Siamo spacciati?
Ovviamente no! E di fatto c’è una versione differente che è molto più efficace.
Forse ti sarai accorto che nell’espressione regolare di prima mancano alcuni sistemi operativi mobile, per esempio Bada. Chiaro, al giorno d’oggi chi più lo usa BadaOS?
Ma se vogliamo fare le cose fatte per bene, è giusto agire in tal senso.
var dispositivoMobile = false; //inizializzata come false
// Verifico se sia mobile oppure no
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.informatico(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.informatico(navigator.userAgent.substr(0,4))) {
dispositivoMobile = true;
}
Quindi vediamo un attimo di capire cosa abbiamo fatto col minor tecnichese possibile.
L’espressione regolare di prima è un macello incredibile: lo ammetto.
Eppure è il modo più completo per verificare se un cliente è davvero un dispositivo mobile con JavaScript.
Andiamo ad agire non solo a livello di sistema operativo, non solo a livello di tipologia di dispositivo.
Le verifiche ulteriori che andiamo a fare con questa espressione regolari, sono queste:
- Connessione dati: verifichiamo se il dispositivo sta facendo uso di un operatore telefonico
- Browser web: verifichiamo se il browser web usato non rientri tra quelli messi a disposizione per i dispositivi mobili.
Sono due aspetti che possono ridurre ancora di più l’area di azione e assicurarci maggiormente che il dispositivo sia davvero un dispositivo mobile.
