Le viewport

Tu as écrit tes media queries, tu ouvres la page sur un téléphone et tu vois une miniature de la version ordinateur qu'il faut agrandir avec deux doigts. Le coupable n'est pas le CSS, mais une seule ligne manquante dans la section head. Une page responsive, c'est une page qui s'affiche bien sur tous les appareils et qui s'adapte automatiquement aux différentes tailles d'écran, et cette ligne en est la fondation.

Qu'est-ce que le viewport ?

Le viewport, c'est la zone de la fenêtre du navigateur dans laquelle la page est visible, sans les barres ni les menus du navigateur lui-même. Il ressemble à une fenêtre percée dans le mur d'un temple : à travers elle, tu ne vois qu'une partie du bas-relief, et sa largeur décide de ce qui tient dans le cadre.

Autrefois, on créait une version spéciale de la page pour les appareils mobiles, généralement à une adresse comme m.domaine.com. Aujourd'hui, tout se fait avec HTML et CSS dans un seul document, mais le téléphone doit savoir que la page est prête pour cela.

Pourquoi le téléphone se fait-il passer pour un ordinateur ?

Les navigateurs mobiles sont nés à une époque où les pages étaient conçues uniquement pour les ordinateurs. C'est pourquoi, sans information supplémentaire, le téléphone affiche la page dans une fenêtre virtuelle plus large que l'écran, par exemple de 980 pixels, puis réduit toute la vue pour qu'elle tienne. Le texte devient minuscule, et la condition max-width: 768px ne s'active jamais, car la page croit qu'elle mesure 980 pixels de large.

La balise meta viewport

Pour créer une page responsive, il faut transmettre à notre fichier HTML l'information que la page doit être responsive. La première étape consiste à ajouter cette ligne à l'intérieur de la balise head :

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

L'attribut name="viewport" indique ce que concerne la balise, et content transmet deux réglages séparés par une virgule. width=device-width règle la largeur de la fenêtre virtuelle sur la largeur de l'écran de l'appareil, et initial-scale=1.0 fixe le zoom initial de la page à 100%, sans aucune réduction. L'ordre des parties est toujours le même : <meta, puis name, et enfin content avec les deux valeurs.

Avant l'ajout de la balise, la page ressemble, sur un téléphone, à une capture d'écran d'ordinateur en miniature. Après l'ajout, le texte a une taille normale, et les media queries voient la vraie largeur de l'écran.

Le viewport et les media queries

Ce n'est qu'avec cette balise que les media queries de la leçon précédente comparent leurs conditions à la vraie largeur du téléphone. Prenons une navigation qui doit être verticale sur un téléphone et horizontale à partir de 768 pixels :

1.navigation {
2  display: flex;
3  flex-direction: column;
4}
5
6@media (min-width: 768px) {
7  .navigation {
8    flex-direction: row;
9  }
10}

Sans la balise viewport, le téléphone se ferait passer pour un écran de 980 pixels de large, donc la condition min-width: 768px serait remplie et le menu se placerait en ligne. Avec la balise, le téléphone mesure par exemple 390 pixels, et le menu reste vertical et facile à toucher du doigt. Voilà à quoi ressemble l'approche mobile-first : tu commences par la mise en page pour un petit écran et tu l'enrichis au fur et à mesure que l'écran s'élargit.

Les largeurs à tester

On ne teste pas une page sur un seul écran. Le plus souvent, on vérifie quelques largeurs typiques en pixels CSS : 320 pour un petit smartphone, 768 pour une tablette en mode portrait, 1024 pour un ordinateur portable ou une tablette en mode paysage et 1440 pour un ordinateur de bureau. Les outils de développement du navigateur proposent un mode appareil dans lequel tu passes de l'une à l'autre en un clic.

Mon conseil : ajoute la balise viewport à chaque page, et ton éditeur le fera souvent pour toi, car le modèle HTML que VS Code génère à partir d'un point d'exclamation la contient déjà. En revanche, n'ajoute ni user-scalable=no ni maximum-scale=1, car ils bloquent le zoom dont les personnes malvoyantes ont besoin au quotidien. Dans la prochaine leçon, nous nous occuperons des conteneurs qui remplissent de façon fluide la largeur disponible.

Souviens-toi : la balise viewport est une fenêtre dans le mur du temple ajustée au visiteur, car sans elle, chaque téléphone contemple le bas-relief de loin.