Lorsque je développe des sites web, je m’assure qu’ils rendent bien sur tous les types d’écrans, dont les mobiles. En général les mediaqueries en CSS sont suffisantes. Mais récemment j’ai développé un site où la version mobile était assez différente de la version desktop. Il me fallait donc une redirection sur base de… la taille de l’écran. En tout cas c’est ce que je pensais dans un premier temps. Car après quelques tests je me suis aperçu que certains smartphones avaient des résolutions d’écran parfois supérieures à des laptops. Ce guide sur les résolutions d’écran iPhone l’illustre fort bien.

J’ai donc cherché un peu et trouvé qu’il y a moyen de détecter le userAgent (çad le navigateur). Cela fonctionne très bien mais comme un utilisateur peut manipuler le userAgent utilisé cette méthode n’est pas trop recommandée. Mon avis perso p/r à cela est qu’un utiliser qui manipule son userAgent est un utilisateur avancé et s’il se rend compte que le site ne fonctionne pas bien à cause de cela il saura quoi faire.

La dernière solution que j’ai trouvée et qui est pour la moi la meilleure, c’est de détecter en JS si le device à une fonction Hover. On sait que cela n’est pas possible sur un device mobile et donc détecter cette fonctionnalité permet de savoir à coup sur si on a à faire à un device mobile ou non. Seul bémol, cette façon ne permet pas d’exclure les iPads du choix. Or dans le site qui m’a posé ce problème je devais avoir une version iPad identique à la version desktop. Il faudra donc combiner  les solutions entr’elles pour obtenir le résultat désiré.