Régler le problème du viewport dans Firefox.
Posté le 11 mai 2012 dans Webdesign par Identitools.
Le scénario
Vous désirez créer un site déclinable en version PC, Tablette & Mobile en utilisant la spécification CSS3 des Media Queries. A priori tout devrait fonctionner correctement, jusqu’au test…
Le problème
Mozilla Firefox (version 12*) n’affiche pas votre version mobile comme vous l’aviez prévu dans votre feuille de style, d’ailleurs juste pour rire une scrollbar horizontale apparait. Horreur et damnation !
*Vu le nouveau cycle de développement il vaut mieux préciser…
La solution magique
Eh bien en fait Firefox interprète très bien les Media Queries, ce n’est donc pas un problème dans votre code. Tout bêtement le navigateur ne redimensionne pas le viewport de manière « normale » à partir du moment ou il y a une toolbar ou une barre de navigation d’activée…
C’est vraiment très con, pour corriger il suffit d’appuyer sur ALT puis Affichage>Barres d’outils et enfin décocher les barres d’outils activées en comptant aussi la barre de navigation (la barre d’onglets ne pose aucun problème).
Enfin bon, dans le monde merveilleux de l’intégration web si tout marchait du premier coup, ce ne serait pas drôle.
Pour plus de clarté voici le bug en action :
À visionner en 720p pour une qualité optimale. Aller sur Screenqueri.es.
7 réponses à “Régler le problème du viewport dans Firefox.”
Bonjour
Merci pour l’info. Je trouve bizarre cette façon de résoudre un problème, personnellement j’aurais retourner le code en long en large et en travers pour trouver la solution. Pour rien apparemment.
Oh ne t’inquiète pas, j’ai découvert ça sur un projet perso et comme je n’avais pas la possibilité de tester sur mobile et pas idée de le tester sur un autre navigateur j’ai cru pendant au moins une heure que quelque chose dans mon code clochait… et donc je l’ai retourné dans tout les sens sans résultat évidemment.
Puis j’ai eu comme une idée farfelue… remarque ça marche bien
ouais perso je ne sais pas si j’en serais arrivé à la conclusion de désactiver les barres d’outils, parfois les navigateurs n’ont pas trop de logique et les cerveaux des développeurs encore moins 😀
En tout cas, bravo belle trouvaille.
Je sais qu’il existe un site qui permet de tester un site dans toutes les résolutions que tu souhaites faudrait que je remette la main dessus… ça pourrait t’être utile je pense.
Pas la peine, j’ai linké Screenqueri.es en dessous de la vidéo. A moins bien sur que tu aie trouvé mieux je suis preneur.
pour tester ton site dans toutes les résolutions d’écran tu peux utiliser http://resizemybrowser.com/
et pour tester en fonction d’un navigateur tu as http://www.browsercam.com/
http://www.scapture.com/ et http://www.browsershots.org/
je sais pas si ça te sera utile mais ça coûte rien d’essayer
Pourquoi pas, en fait je préfère screenquer.ies car il permet de tester mon serveur local directement sur leur site ce qui est vraiment pas mal.
Resizemybrowser c’est pas mal non plus si l’on désire juste redimensionner la fenêtre il y a l’extension webdevelopper qui le fait déjà (avec possibilité d’enregistrer ses préférences). Quoi que ça pourrait être utile sur des navigateurs comme Internet explorer (vu que les tablettes windaube vont fonctionner uniquement avec IE d’après ce que j’ai compris).
Les services comme browsershot & cie c’est sympathique au début mais quand on a à tester régulièrement des sites l’idéal c’est encore d’avoir ses propres outils (pour éviter l’attente) dans ce cas pour mes tests j’ai IETester : http://www.my-debugbar.com/wiki/IETester/HomePage ainsi que les navigateurs les plus courants d’installés sur Windows & Linux afin d’être le plus exhaustif possible.
Quand à mac, je n’irai pas me salir les mains avec leur anti-aliasing horrible 😀 #trololol
oui comme tu dis les sites que je te propose c’est surtout pour du dépannage ponctuel quand tu es développeurs à plein temps il vaut mieux avoir ses propres outils c’est plus simple et plus rapide pour travailler.