Comprendre les bases du viewport
Le viewport est un concept que tous les développeurs web utilisent, mais que beaucoup comprennent mal. Cet article vous explique ce qu'est le viewport, en quoi il diffère de la résolution d'écran, et comment il influence la création de sites responsive.
Qu'est-ce qu'un viewport ?
Le viewport, c'est la zone visible d'une page web dans votre navigateur. Imaginez-le comme la fenêtre à travers laquelle vous regardez un site. Sa taille change selon l'appareil : petit écran de smartphone, tablette, ou grand moniteur de bureau.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette balise meta dit au navigateur comment gérer les dimensions et le zoom de la page. Sans elle, votre site mobile ressemblera à une version miniature du site desktop — pas idéal.
Viewport et résolution d'écran : quelle différence ?
Beaucoup de développeurs confondent la taille du viewport avec la résolution d'écran. Ce sont deux choses différentes :
| Concept | Définition | Exemple |
|---|---|---|
| Taille du viewport | La zone visible en pixels CSS | 375 × 812 sur iPhone 13 |
| Résolution d'écran | Les pixels physiques de l'appareil | 1170 × 2532 sur iPhone 13 |
| DPR (ratio de pixels) | Pixels physiques ÷ pixels CSS | 3.0 sur iPhone 13 |
Pourquoi le viewport compte pour les développeurs
Comprendre le viewport vous aide dans plusieurs situations concrètes :
- Design responsive : Chaque appareil a un viewport différent, et votre mise en page doit s'adapter.
- Optimisation mobile : Les viewports mobiles demandent une attention particulière pour le tactile et la lisibilité.
- Performance : Connaître le viewport permet d'optimiser les images et ressources pour chaque taille d'écran.
- Expérience utilisateur : Un bon design responsive offre une navigation fluide sur tous les appareils.
Comment vérifier la taille de votre viewport
Vous pouvez vérifier votre viewport actuel avec notre outil Screen Size Checker. Il affiche vos dimensions en pixels CSS, le DPR (le ratio de pixels de votre écran) et la résolution physique.
Tailles de viewport courantes à connaître
Quand vous créez un site responsive, gardez ces largeurs en tête :
- Petit mobile : 320px - 375px
- Grand mobile : 376px - 428px
- Tablette : 768px - 1024px
- Desktop : 1025px - 1440px
- Grand desktop : 1441px+
Conclusion
Maîtriser le viewport est la base du développement web moderne. En construisant vos designs responsive autour de la taille du viewport plutôt que de la détection d'appareil, vous créez des sites qui fonctionnent bien partout.
N'oubliez pas que le viewport change quand l'utilisateur tourne son appareil ou redimensionne sa fenêtre. Vos designs doivent être assez flexibles pour gérer ces changements.
Pour des infos détaillées sur les viewports de chaque appareil, consultez nos guides Tailles de viewport iPhone et Tailles de viewport Android.