CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Optimisation d'Affichage Web pour Appareils Mobiles avec la Balise Méta Viewport

Retour à la formation
Chapitre 4 Leçon 1
Précédent
Suivant

Découvrez comment utiliser la balise méta viewport pour créer des pages web adaptées aux appareils mobiles.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les compétences acquises dans cette leçon sont essentielles pour les développeurs front-end, web designers et responsables UX/UI.

Alternatives et ressources

En plus de la balise méta viewport, vous pouvez explorer des frameworks comme Bootstrap et Foundation pour créer des designs responsives.

Questions & Réponses

L'attribut principal est name="viewport".
La valeur par défaut de l'attribut width est de 980 pixels.
L'attribut user-scalable spécifie si l'utilisateur est autorisé ou non à zoomer sur la page.