Viewport

Une fenêtre d'affichage (viewport) est la zone visible d'une page web ou d'une application sur l'écran d'un utilisateur à un moment donné. Sur un ordinateur de bureau, la fenêtre d'affichage correspond à la fenêtre du navigateur moins les barres d'outils, les barres de défilement et l'interface du navigateur. Sur les tablettes et les smartphones, la fenêtre d'affichage est toute la zone d'écran que le navigateur peut utiliser. La fenêtre d'affichage détermine comment le contenu est mis à l'échelle, agencé et présenté au lecteur. En HTML, la balise `<meta name="viewport">` indique au navigateur comment contrôler les dimensions et la mise à l'échelle de la page, ce qui est le fondement du [design responsive](/glossary/responsive-design).

Un contenu qui ignore les différences de fenêtre d'affichage offre une mauvaise expérience de lecture sur certains appareils. Le texte peut être illisiblement petit sur les téléphones, les boutons peuvent être impossibles à toucher, ou un défilement horizontal peut être nécessaire pour voir la page entière. Comme les appareils mobiles représentent désormais la majorité du trafic web, les publications qui ne s'adaptent pas aux différentes tailles de fenêtre d'affichage perdent des lecteurs et paraissent peu professionnelles. Les moteurs de recherche prennent aussi en compte la compatibilité mobile dans leur classement, donc une bonne gestion de la fenêtre d'affichage influence à la fois l'expérience utilisateur et la visibilité.

Les publications FlipLink sont entièrement responsives et s'adaptent automatiquement à n'importe quelle taille de fenêtre d'affichage. La visionneuse de flipbook détecte les dimensions disponibles de la fenêtre d'affichage et ajuste en conséquence le rendu des pages, le placement des commandes et les niveaux de zoom. Sur les larges fenêtres d'affichage de bureau, les publications s'affichent en [double page](/glossary/page-spread). Sur les fenêtres d'affichage mobiles étroites, elles passent à une vue d'une seule page avec une navigation adaptée au tactile. Les paramètres d'[expérience de page](/features/page-experience-and-layout) permettent aux éditeurs de choisir entre différents modes de mise en page, et FlipLink gère les calculs de fenêtre d'affichage pour garder le contenu lisible et bien proportionné. Lorsque tu intègres un flipbook à l'aide du code d'[intégration responsive](/features/sharing-and-distribution), il remplit automatiquement son conteneur et réagit aux changements de fenêtre d'affichage — y compris la rotation de l'appareil — sans aucune configuration supplémentaire.

La fenêtre d'affichage est contrôlée par la balise meta HTML `<meta name="viewport" content="width=device-width, initial-scale=1">`. Cette balise indique au navigateur de définir la largeur de la page égale à la largeur d'écran de l'appareil et de démarrer à un zoom de 1x. Sans elle, les navigateurs mobiles rendent les pages à une largeur virtuelle d'environ 980 pixels puis réduisent le résultat pour qu'il tienne, rendant le texte minuscule et les interactions difficiles. Les principales propriétés de la fenêtre d'affichage incluent : - **width** : Définit la largeur de la fenêtre d'affichage. `device-width` correspond à la largeur réelle de l'écran en pixels CSS. - **initial-scale** : Contrôle le niveau de zoom au premier chargement de la page. Une valeur de `1` signifie aucun zoom. - **maximum-scale** et **user-scalable** : Contrôlent si les utilisateurs peuvent pincer pour zoomer. Les directives d'accessibilité recommandent d'autoriser le zoom. - **viewport-fit** : Sur les appareils dotés d'encoches ou de coins arrondis, `viewport-fit=cover` étend le contenu dans la zone de sécurité. Les media queries CSS utilisent les dimensions de la fenêtre d'affichage pour appliquer des styles différents. Par exemple, `@media (max-width: 768px)` cible les fenêtres d'affichage plus étroites que 768 pixels CSS, un point de rupture courant pour les transitions tablette-mobile.

**« La fenêtre d'affichage et la résolution d'écran sont la même chose. »** Ce n'est pas le cas. Un téléphone peut avoir une résolution d'écran de 1170 x 2532 pixels physiques mais une fenêtre d'affichage de 390 x 844 pixels CSS. Le ratio de pixels de l'appareil (DPR) comble l'écart — sur ce téléphone, le DPR est de 3, ce qui signifie que chaque pixel CSS correspond à 9 pixels physiques. Les concepteurs travaillent en pixels CSS (la fenêtre d'affichage), pas en résolution physique. **« Définir `user-scalable=no` améliore l'expérience. »** Empêcher le zoom casse l'accessibilité pour les utilisateurs ayant des déficiences visuelles. Les standards web modernes et de nombreux audits d'accessibilité signalent cela comme un défaut. La visionneuse de FlipLink autorise le pincer-pour-zoomer par défaut tout en préservant l'intégrité de la mise en page. **« Les tailles de fenêtre d'affichage de bureau sont constantes. »** Les fenêtres d'affichage de bureau varient énormément. Un utilisateur avec un moniteur de 27 pouces et les outils de développement du navigateur ouverts peut avoir une fenêtre d'affichage aussi étroite que 900 pixels — bien dans le territoire des tablettes. Les publications responsives doivent s'adapter aux dimensions réelles de la fenêtre d'affichage, pas aux catégories d'appareils supposées.

La fenêtre d'affichage est la fenêtre à travers laquelle les lecteurs voient ton contenu. Les publications qui réagissent à la taille de la fenêtre d'affichage offrent une expérience cohérente et professionnelle sur chaque appareil — d'un téléphone de 4 pouces à un moniteur de bureau de 32 pouces — sans que le lecteur ne remarque jamais l'adaptation en cours.