Viewport mobile

Objectifs de la leçon

• Construire l'adaptation mobile minimale avec un élément HTML adapté.
• Ajouter les attributs qui rendent la structure testable.
• Expliquer l'impact utilisateur de la décision prise.

Configurer la zone de mise en page mobile

Le squelette HTML fixe les règles de lecture avant le contenu : mode standard, langue, encodage, viewport et séparation entre métadonnées et contenu visible.

« Viewport mobile » sert ici à rendre l'adaptation mobile minimale explicite dans le document.

Décision de structure

Place chaque information dans la zone qui lui donne son rôle. Le head décrit la ressource ; le body porte ce que la personne consulte et utilise.

Viewport ne rend pas automatiquement une page responsive. Un contenu trop large peut encore provoquer un débordement horizontal.

Contrôle du document

Inspecte le code source et le DOM : les déclarations doivent être uniques, placées au bon niveau et compréhensibles sans dépendre du rendu visuel.

Pour html-01-viewport-mobile, commence par le premier test en échec et relie son message à l'élément, l'attribut ou la relation concernée.

Vocabulaire lié

• doctype — Déclaration qui demande le mode standard du navigateur.
• head — Zone qui décrit le document et référence ses ressources.
• body — Zone qui contient le document présenté à la personne.
• charset — Déclaration de l'encodage utilisé pour décoder le fichier.
• viewport — Configuration de la largeur de mise en page sur mobile.

Validation

• Je sais expliquer pourquoi l'adaptation mobile minimale améliore PulsaConf.
• Je peux relier chaque test à une exigence utilisateur.
• Je garde une structure compréhensible sans style CSS.