HTML — Adaptation aux écrans
Avant d’adapter la mise en page avec CSS, donnez au navigateur de bonnes bases : un viewport adapté au mobile, un ordre de lecture cohérent et un contenu dont les priorités restent claires sur tous les écrans.
Une page doit rester compréhensible quand l’écran change, que le texte s’agrandit ou qu’on utilise un autre mode de navigation. CSS gère l’essentiel de la présentation, mais HTML pose les bases : les métadonnées du document, l’ordre des éléments et la place des informations importantes.
Régler le viewport et laisser le contenu s’adapter
La déclaration viewport demande aux navigateurs mobiles d’utiliser la largeur de l’appareil pour la mise en page. Le contenu peut alors revenir à la ligne naturellement. Évitez les largeurs imposées et les contenus impossibles à couper qui obligent à faire défiler toute la page horizontalement.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Article adapté aux écrans</title>
</head>
<body>
<main>
<h1>Un document pour plusieurs écrans</h1>
<p>Un ordre logique reste compréhensible avant même le chargement des styles.</p>
</main>
</body>- Ajoutez la déclaration viewport habituelle.
- Organisez les éléments dans un ordre logique.
- Laissez le texte revenir à la ligne plutôt que de lui imposer une hauteur fixe.
