mobile ou tablette en Javascript ?

Rédigé par BeHuman 14 commentaires
Classé dans : HTML/CSS/JavaScript Mots clés : tablette, mobile, user-agent, match, regexp

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 :)

++

14 commentaires

#1  - pierre a dit :

J'ai testé et c'est ce qui fonctionne le mieux chez moi pour le moment après avoir testé plusieurs techniques.
Etant abonné à browserstack, j'ai pu tester plusieurs tablettes android mais aussi ipad et beaucoup de mobile et ça fonctionne à chaque fois.

Merci pour cette solution

Répondre
#2  - BeHuman a dit :

@pierre :
Merci ;)
La même méthode peut être appliqué en php, mais ça devient plus compliqué au niveau de la gestion des dimensions d'écran, il faudrait alors faire une passerelle js->php.
Dès que j'ai un peu de temps j'édite un article sur le sujet.

Répondre
#3  - johan a dit :

Ça fonctionne nickel

Répondre
#4  - Thomas a dit :

Ce bout de code ne fonctionne pas pour le Samsung Galaxy S3 mini et le HTC One. Ces deux téléphones sont considérés comme des tablettes.

Répondre
#5  - BeHuman a dit :

@Thomas :
merci pour le retour :)
il faut donc modifier les valeurs de dimension

Répondre
#6  - dab a dit :

le problème ici est que certain mobile Android on la même définition et même une définition supérieure à certaines tablettes... pas évident.
mon vieux Samsung Galaxy S à une définition de 480x800 et donc considéré comme une tablette. sinon le code est nickel, merci!

Répondre
#7  - toto42 a dit :

Bonjour,
Merci pour ce bout de code qui m'a été utile et pour en venir au problème des Galaxy S 3, il suffit simplement de modifier un peu la forme de la condition en testant d'abord si le userAgent contient le mot Mobile si il a déjà match le mot Android et seulement après regarder la taille de l'écran si ce n'est pas le cas. Cela devrait régler votre problème :)

Répondre
#8  - Quent' a dit :

Merci pour la petite blague : navigator.userAgent.match(/(android|ipute)/gi);

Répondre
#9  - Quent' a dit :

Et pour windows : Tablette, Smartphone ou Desktop, on détecte ça comment ?

Répondre
#10  - BeHuman a dit :

@Quent' :
^^ la blague aurait été la même pour windob #okJeSors

Le premier exemple de l'article te donne la réponse, ainsi que le dernier exemple
if (navigator.userAgent.match(android|iphone|msie|iemobile|windows phone [...]

à toi de rajouter les nouveaux identifiants de l'userAgent à cette liste déjà plutôt complète séparé par des |
cordialement ;-)

PS vus que la ligne

Répondre
#11  - Laura C a dit :

J'adore ton site, merci à toi, continue ainsi

Répondre
#12  - casp a dit :

Sympa; mais question la hauteur et la largeur s'applique t'elle à la largeur physique ou à celle du css ? Et quid du pixel ratio ?

Répondre
#13  - blog maquillage a dit :

Ce blog est d'une grand utilité avec son contenu riche et varié, un grand bravo !

Répondre
#14  - Jean Champeaux a dit :

Merci pour cet edito, je pense avoir incroyablement appris.

Répondre

Écrire un commentaire

Quelle est la dernière lettre du mot 8nst2g0 ?

Fil RSS des commentaires de cet article