CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 9 · Application directe du cours
La balise oubliée
Responsive design · niveau 1 (application)
Énoncé
La page code/ch9/erreurs/sans-viewport.html colore son fond en crème quand la fenêtre mesure moins de 48rem. Sur un téléphone de 375 pixels de large, le fond reste blanc et le texte est minuscule. Expliquer les deux symptômes, et les vérifier dans le mode appareil des outils de développement. Corriger.
Corrigé
Sans balise viewport, le téléphone fait comme si sa fenêtre mesurait 980 pixels : il met la page en forme à cette largeur, puis la réduit à l'échelle pour la faire tenir dans l'écran. D'où les deux symptômes : le texte, réduit de 62 %, est minuscule ; et la requête (width < 48rem) est fausse, puisque la fenêtre mesure 980 pixels, plus de 768. Chromium, en simulation de téléphone, donne bien clientWidth = 980 et une échelle de 0,38.
Correction : ajouter dans l'en-tête
<meta name="viewport" content="width=device-width, initial-scale=1">La fenêtre mesure alors 375 pixels, à l'échelle 1, et le fond devient crème. Dans le mode appareil, il faut choisir un appareil mobile (et non Responsive en mode bureau) pour que l'absence de balise soit simulée.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.