Viewport

Surface visible dans la fenêtre du navigateur d’un ordinateur ou d’un smartphone.

La taille du viewport d’un terminal mobile ne correspond ni à la taille réelle en pixels physiques de son écran ni à celle en pixels CSS.

Les pixels donnés par le constructeur d’un smartphone ne sont pas les mêmes que ceux qui seront mesurés et utilisés en design web.

La règle CSS @viewport sert à configurer la présentation des éléments selon la zone d’affichage.

La balise meta viewport permet d’imposer la taille de l’affichage du contenu sur la surface pour un périphérique mobile et forcer le bon niveau de zoom.

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

Le viewport n’inclut pas la scrollbar (barre de défilement) dans un navigateur web.

MDN Viewport

Quelques outils de test

ViewPort Resizer

Resizemybrowser

ResponsivePixelTuner

Responsivepx

IamResponsive

Responsinator