La taille du viewport correspond à la largeur et à la hauteur de la zone qu’utilise le navigateur pour afficher une page web, mesurées en pixels CSS. Elle est en général bien plus petite que la résolution de l’écran : un iPhone avec un écran de 1206 × 2622 pixels a un viewport de 402 × 874 pixels CSS, car chaque pixel CSS est dessiné avec trois pixels physiques dans chaque direction. Le CSS responsive, les media queries et la plupart des choix de mise en page reposent sur la taille du viewport, pas sur la résolution de l’écran.
Taille du viewport et résolution d’écran
Trois valeurs décrivent l’écran d’un téléphone, et on les confond facilement :
| Terme | Exemple (iPhone 17) | Ce que c’est |
|---|---|---|
| Résolution d’écran | 1206 × 2622 px | Pixels physiques de la dalle |
| Device pixel ratio (DPR) | 3 | Pixels physiques par pixel CSS, dans chaque direction |
| Taille du viewport | 402 × 874 px CSS | Résolution divisée par le DPR ; c’est ce que voit le CSS |
Sur ordinateur, le DPR vaut souvent 1 (un écran 1920 × 1080 à 100 % donne un viewport de 1920 px de large, moins les barres de défilement), ou 2 sur les portables à écran haute densité. Le zoom du navigateur modifie aussi le DPR : zoomer à 200 % divise par deux la largeur du viewport en pixels CSS.
Pour les valeurs modèle par modèle, consultez le tableau des tailles d’écran et viewports iPhone.
Comment connaître la taille de votre viewport
Dans la console du navigateur
Ouvrez DevTools (F12 ou Cmd + Option + I), allez dans l’onglet Console et exécutez :
`${window.innerWidth} × ${window.innerHeight} @ ${window.devicePixelRatio}x`window.innerWidth inclut la barre de défilement verticale. document.documentElement.clientWidth l’exclut, et se rapproche davantage de ce qu’utilisent les pourcentages CSS et les largeurs à 100%.
Dans le mode appareil de DevTools
La barre d’outils des appareils affiche la taille du viewport émulé en haut de la page. En mode Responsive, vous pouvez faire glisser les bords ou saisir n’importe quelle taille. Voir le guide de l’émulateur mobile de Chrome.
Sur un téléphone
Ouvrez un site du type « what is my viewport », ou chargez une page avec un petit script qui affiche innerWidth et devicePixelRatio. Le résultat dépend de l’orientation et des barres d’outils du navigateur.
Layout viewport et visual viewport
Les navigateurs mobiles ont en réalité deux viewports :
- Le layout viewport est la zone dans laquelle le CSS met en page le document. Avec une balise meta viewport correcte, sa largeur est égale à la largeur de l’appareil en pixels CSS.
- Le visual viewport est la partie visible à l’écran à un instant donné. Il rétrécit quand l’utilisateur zoome avec deux doigts ou quand le clavier virtuel s’ouvre.
Les éléments en position: fixed sont positionnés par rapport au layout viewport, c’est pourquoi un pied de page fixe peut se retrouver caché derrière le clavier. En JavaScript, on lit le visual viewport avec window.visualViewport.width et .height, et on peut écouter son événement resize.
Pourquoi la hauteur du viewport change sans cesse sur mobile
Sur téléphone, la barre d’adresse et les barres d’outils se replient pendant le défilement, donc la hauteur visible varie. L’unité classique 100vh correspond à la hauteur maximale possible, ce qui explique que les sections plein écran étaient autrefois coupées en bas. Le CSS propose désormais une unité pour chaque cas :
| Unité | Signification |
|---|---|
svh |
Petite hauteur de viewport : barres d’outils entièrement affichées |
lvh |
Grande hauteur de viewport : barres d’outils entièrement masquées |
dvh |
Hauteur dynamique : suit le mouvement des barres d’outils |
vh |
Équivaut à lvh dans les navigateurs mobiles récents |
Pour une section d’accueil qui doit tenir dans l’écran au chargement, min-height: 100svh est en général le choix le plus sûr. Les unités svw, lvw et dvw existent pour la largeur.
Tailles de viewport courantes
| Type d’appareil | Largeurs de viewport habituelles (portrait) |
|---|---|
| Petits téléphones | 320–375 px |
| iPhone récents | 375–440 px |
| Téléphones Android | 360–412 px |
| Tablettes | 744–1032 px |
| Ordinateurs portables | 1280–1536 px |
| Écrans de bureau | 1440–2560 px |
Ces écarts expliquent pourquoi une mise en page responsive est fluide entre les breakpoints au lieu de viser des tailles exactes.
Tester différentes tailles de viewport
Redimensionner une fenêtre sur ordinateur change la largeur du viewport, mais les navigateurs de bureau s’arrêtent en général vers 500 px et gardent un DPR de 1 ou 2. Pour voir un viewport de téléphone avec la bonne taille et la bonne densité, utilisez le mode appareil de DevTools ou une extension d’affichage mobile comme Mobile View Extension, qui applique la taille d’écran, le DPR et le user agent d’un appareil et accepte des résolutions personnalisées. La démarche complète est décrite dans comment tester un site responsive.
Questions fréquentes
Quelle est la taille de mon viewport ?
Exécutez window.innerWidth et window.innerHeight dans la console du navigateur. Sur téléphone, ouvrez une page qui affiche ces valeurs ; le résultat change avec l’orientation.
La taille du viewport est-elle la même chose que la résolution d’écran ?
Non. La taille du viewport s’exprime en pixels CSS, la résolution en pixels physiques. Divisez la résolution par le device pixel ratio pour obtenir la taille du viewport.
Pour quelle taille de viewport concevoir ?
Concevez des mises en page fluides qui fonctionnent dès 320 px. Vérifiez les largeurs de téléphone courantes de 360, 390–402 et 430–440 px, une tablette vers 768–834 px et un ordinateur vers 1280–1440 px.