Testez votre responsive design avec Firefox

Vous aimeriez tester votre design “responsive” (cf. notre billet Comparaison de frameworks CSS « responsive »), mais n’avez pas de smartphone ou de tablette sous la main. Firefox vous facilite la tâche : sous le menu “Tools/Web Developer”, choisissez “Responsive Design View”. Vous avez alors accès à un affichage spécial, avec différentes tailles d’écran prédéfinies (on peut aussi mémoriser ses propres dimensions).

image1

Si l’affichage n’est pas celui que vous attendiez, c’est peut-être parce que le serveur web vérifie aussi le “user-agent” transmis par le navigateur. Vous pouvez alors installer l’extension Firefox User Agent Switcher. Cela vous permettra de “tromper” le serveur web, en faisant passer votre navigateur pour un autre ! Ainsi, ce blog utilise l’extension WPTouch, qui adapte l’affichage aux smartphones. Voici ce que cela donne dans Firefox avec le user-agent “iPhone”. On s’y croirait presque 😉

image2