mobile ou tablette en Javascript ?

Pour vos développement web il est de plus en plus important de mettre en place une gestion d'affichage pour mobile et tablette. Dans cet exemple je vais vous montrer comment faire cela en javascript.
if (navigator.userAgent.match(/(android|iphone|blackberry|symbian|symbianos|symbos|netfront|model-orange|javaplatform|iemobile|windows phone|samsung|htc|opera mobile|opera mobi|opera mini|presto|huawei|blazer|bolt|doris|fennec|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook)/gi)) { alert('mobile'); } else { alert('none'); }
comme vous pouvez le constater, le code est plutot simple.
navigator.userAgent;
permet de récupérer l'user-agent du navigateur internet du visiteur. ensuite via match je vais vérifier l'existance de sous chaînes de caractère dans notre user-agent, exemple:
navigator.userAgent.match(/(android|ipute)/gi);
Pour les tablette c'est une autre histoire, car un IPAD on est d'accord, c'est forcement une tablette, mais un android ? :) cela peu être aussi bien un mobile qu'une tablette. Donc pour détecter si c'est une tablette je vais utiliser uhne autre méthode qui consiste à récupérer la taille de l'écran du visiteur et ainsi je pourrez déterminer si il utilise une tablette ou non.
if ((screen.width >= 480) && (screen.height >= 800)) alert('tablette');
comme vous pouvez le constater là aussi, c'est plutot simple à mettre en place, non?
Bon, maintenant je vais couplet tout ça
if (navigator.userAgent.match(/(android|iphone|ipad|blackberry|symbian|symbianos|symbos|netfront|model-orange|javaplatform|iemobile|windows phone|samsung|htc|opera mobile|opera mobi|opera mini|presto|huawei|blazer|bolt|doris|fennec|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook)/gi)) { if ( ((screen.width >= 480) && (screen.height >= 800)) || ((screen.width >= 800) && (screen.height >= 480)) || navigator.userAgent.match(/ipad/gi) ) { alert('tablette'); } else { alert('mobile'); } } else { alert('bureau'); }
Démo
et voilà, en espérant que cela vous soit utile :)
++