Javascript et la détection d’appareil mobile

Cette semaine, au bureau, j’ai eu à travailler un peu avec javascript afin de détecter si le média utilisé était une tablette, un téléphone cellulaire ou encore un ordinateur « normal ». En temps normal, j’aurais utilisé le script PHP fourni par mon développeur backend mais malheureusement, je devais faire la détection à l’intérieur d’un fichier JS. PHP n’était donc pas à ma rescousse cette fois-ci.

J’ai donc fait une recherche sur Google afin de trouver un script déjà fait (ça ne me donne pas grand chose de réinventer la roue). J’ai vite trouvé quelque chose qui me plaisait et je veux le partager avec vous. Voici le bout de code afin de rendre possible cette détection :

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // Si le média est un mobile...
} else {
    // Sinon, il se passe ceci...
}

En gros, si l’appareil est du type Android, webOS, iPhone, iPad, iPod, Blackberry, IEMobile ou Opera Mini, faites ce que vous avez à faire avec un mobile. Sinon, considérez le média comme un ordinateur de bureau ou un laptop. Il est aussi possible avec un else if de pouvoir séparer les tablettes des téléphones selon vos besoins.

Si j’ai oublié un type de téléphone ou si vous avez des questions par rapport à ce script de détection, n’hésitez pas à me contacter grâce aux commentaires ci-dessous!

À un prochain tuto!

Comment empêcher votre iPhone de redimmentioner vos fontes.

La semaine dernière, je travaillais sur le site mobile d’un client et je commençais à légèrement m’arracher les cheveux de sur la tête pour une question de fontes qui grossissait dans un caroussel à taille fixe. Pour faire court, le texte grossissait assez pour sortir de l’écran mais seulement sur iPhone et, encore plus bizarre, seulement quand je faisais faire une rotation à l’écran. En plus, ça créait le bug après quelques changements de panneaux dans mon caroussel et surtout, lorsque je mettais mon CSS en mode !important.

J’en ai parlé avec mon grand chum Google et il m’a fait partager sa grande sagesse et son savoir sans limite. Il m’a dit : « Dave, mon homme, déjà, calmes-toi, t’as l’air d’une contrebasse avec les nerfs sortis dans l’cou d’même. En plus d’être laite, c’est pas bon pour ton coeur. » Ensuite, il m’a donné ce bout de code en CSS que l’on peut placer localement sur l’élément problématique ou encore sur l’entièreté du <body> pour avoir un effet mur à mur, une gracieuseté de Chris Coyier, du site http://css-tricks.com/

-webkit-text-size-adjust: none;

Et bam! Magie! Fini les problèmes de redimmentions de textes. Vous avez déjà eu affaire à ce type de bug? Faites-moi part de votre expérience!