Comprendre et Utiliser la Balise Viewport
Objectifs
Comprendre les spécificités des appareils mobiles et l'importance du Responsive Design. Apprendre à utiliser la balise méta viewport pour adapter l'affichage des pages HTML.
Résumé
Découvrez comment utiliser la balise méta viewport pour créer des pages web adaptées aux appareils mobiles.
Description
Dans cette leçon, nous aborderons les spécificités des appareils mobiles tels que les tablettes et smartphones et l'utilisation de la balise méta viewport. Vous apprendrez à adapter l'affichage de vos pages HTML aux différentes tailles d'écrans sans modifier le contenu de la page. Nous commencerons par observer une page HTML classique dans un navigateur de bureau et étudierons son rendu sur un simulateur iPhone et un iPad. Nous détaillerons l'impact des media queries sur les couleurs de fond en fonction de la taille de la fenêtre du navigateur. Ensuite, nous passerons à l'utilisation de la balise <meta name="viewport" /> avec divers attributs tels que width, initial-scale et user-scalable. Vous verrez comment ces attributs peuvent influencer l'affichage de votre page sur différents appareils.
Questions - réponses
name="viewport".
Programme détaillé
Module 1 - Introduction video
Module 2 - Principes généraux
Module 3 - Réaliser une maquette en responsive Design
Module 4 - Maitriser l'intégration en Responsive Design
Module 5 - Le travail des textes
Module 6 - Intégrer des images optimisées
Module 7 - Une réalisation complète
Module 8 - Connaissances complémentaires
Module 9 - Conclusion
