Viewport

Qu'est-ce que le viewport ?

Le viewport (fenêtre d'affichage) est la zone d'une page web visible par l'utilisateur. Sur ordinateur, c'est la zone de contenu de la fenêtre du navigateur, sur mobile c'est l'écran, et elle change quand l'utilisateur fait pivoter l'appareil, redimensionne la fenêtre ou zoome. Votre CSS se met en page selon la largeur du viewport : bien la définir est la base du design mobile-first et des mises en page adaptatives.

Viewport de mise en page et viewport visuel

Les navigateurs suivent en réalité deux viewports (selon la page MDN sur la Visual Viewport API) :

• Viewport de mise en page (layout viewport) : couvre tous les éléments de la page. Il ne change pas quand l'utilisateur zoome par pincement.
• Viewport visuel (visual viewport) : la partie de la page actuellement à l'écran. Il rétrécit quand l'utilisateur zoome, et le clavier à l'écran peut le réduire sans toucher au viewport de mise en page.

C'est pourquoi une barre en position fixe peut se retrouver cachée derrière le clavier. Les scripts lisent le viewport visuel via window.visualViewport (width, height, scale, offsetTop), que MDN indique comme largement disponible depuis août 2021.

La balise meta viewport

Les navigateurs mobiles affichent souvent la page dans un viewport virtuel plus large (MDN cite 980 px sur un écran de 640 px) puis la réduisent, si bien que vos media queries voient une largeur erronée. La balise meta viewport corrige cela. La valeur recommandée par MDN :

<meta name="viewport" content="width=device-width">

Beaucoup de sites ajoutent initial-scale=1 ; selon MDN c'est généralement inutile, mais sans danger si vous voulez que la page démarre à 100 % de zoom. Les autres directives :

Unités de viewport

Le viewport sert de base à vw (1 % de la largeur du viewport) et vh (1 % de sa hauteur). MDN précise que, quand le viewport est redimensionné, la taille calculée de ces unités change avec lui. La largeur de la balise meta est la base de vw.

Ne bloquez jamais le zoom

user-scalable=no empêche les personnes malvoyantes d'agrandir la page. MDN avertit que cela les empêche de lire et de comprendre le contenu, que WCAG exige une mise à l'échelle d'au moins 2x et qu'il est préférable d'autoriser 5x. Deux critères de succès WCAG s'appliquent : 1.4.4 Redimensionnement du texte (le texte peut être agrandi jusqu'à 200 pour cent sans perte de contenu ni de fonctionnalité) et 1.4.10 Redistribution du contenu (le contenu fonctionne à une largeur équivalente à 320 pixels CSS sans défilement dans deux dimensions). Les navigateurs peuvent aussi ignorer ces réglages : selon MDN, iOS 10 et versions ultérieures ignorent par défaut user-scalable, minimum-scale et maximum-scale. Voir WCAG et les mises en page accessibles pour le tableau complet.

Erreurs courantes

• Pas de balise meta viewport. La page s'affiche dans un grand viewport virtuel et paraît minuscule sur mobile.
• Désactiver le zoom avec user-scalable=no ou un maximum-scale bas. Cela exclut les utilisateurs malvoyants et n'est pas nécessaire pour éviter les bugs de mise en page.
• Largeurs fixes en pixels. Les éléments plus larges que le viewport provoquent un défilement horizontal et cassent la redistribution du contenu.
• Baser une mise en page sur vh seul. La hauteur visible change avec les barres du navigateur et le clavier. Testez avec le clavier ouvert.
• Tester seulement sur ordinateur. Redimensionnez la fenêtre ou utilisez le mode appareil du navigateur, puis vérifiez sur un vrai téléphone.

Viewport et tests de performance

La taille du viewport détermine quelles media queries s'appliquent et quelle image votre page charge : les exécutions sur ordinateur et sur mobile peuvent donc charger un contenu différent. Le suivi de la vitesse de page LoadFocus lance des audits Lighthouse sur ordinateur et mobile depuis 25 régions cloud, ce qui permet de comparer les deux et de suivre les Core Web Vitals dans le temps. D'autres conseils figurent dans notre guide pour améliorer la vitesse de votre site (en anglais). Références : MDN sur la balise meta viewport et la Visual Viewport API (en anglais).

Questions fréquentes : viewport

Que fait width=device-width ?

Cela fixe la largeur du viewport de mise en page à la largeur d'écran de l'appareil en pixels CSS, pour que la page ne soit pas rendue dans un viewport virtuel plus large puis réduite.

user-scalable=no est-il autorisé ?

Techniquement oui, mais cela bloque le zoom par pincement et pénalise les personnes malvoyantes. Selon MDN, WCAG exige au moins 2x et recommande d'autoriser 5x. Laissez le zoom activé.

Quelle différence entre le viewport de mise en page et le viewport visuel ?

Le viewport de mise en page est la zone selon laquelle votre CSS se dispose ; il ne bouge pas quand on zoome par pincement. Le viewport visuel est la partie actuellement visible : il rétrécit quand on zoome ou quand le clavier à l'écran apparaît.

Ai-je besoin de initial-scale=1 ?

Souvent non. Selon MDN, c'est généralement inutile mais sans danger si vous voulez démarrer à 100 % de zoom. Évitez surtout le débordement horizontal.

Comment tester différents viewports ?

Redimensionnez la fenêtre du navigateur, utilisez la barre d'appareils des outils de développement et confirmez sur un vrai appareil. Les outils de laboratoire comme Lighthouse testent aussi mobile et ordinateur séparément.