La fenêtre d’affichage dans le navigateur est la zone de la fenêtre où le contenu Web est affiché.
Généralement, les écrans sur lesquels les pages Web sont traitées ne peuvent pas afficher l’intégralité du contenu, de sorte que les navigateurs nous aident à accéder à l’intégralité du contenu avec une barre de défilement.
*Affichage de l’écran mobile de la page sans fenêtre d’affichage
Sur les appareils avec des largeurs d’écran étroites (téléphones portables, tablettes), tout le contenu de la page est compressé et affiché. Par exemple, si une page avec un contenu de 900 pixels se charge sur un appareil mobile de 500 pixels de large, le contenu apparaît à l’étroit sur l’écran du mobile. Par conséquent, les utilisateurs doivent zoomer sur l’écran pour afficher le contenu.
Cette vue est un moyen d’afficher des sites optimisés non mobiles sur des appareils à largeur réduite. La raison de ce problème est que les pages ne sont pas optimisées pour les mobiles.
Le mécanisme mentionné ci-dessus n’est évidemment pas une structure utile pour les écrans étroits (téléphones portables, tablettes).
En réponse à cette situation, Apple a développé la balise méta de la fenêtre d’affichage à utiliser dans iOS Safari pour les développeurs Web. Aujourd’hui encore, de nombreux navigateurs mobiles utilisent activement cette balise.
L’utilisation des fenêtres d’affichage sur les sites Web est généralement la suivante. Il est situé en haut de la balise <head></head> dans la structure HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
La propriété width de la balise meta contrôle la taille de la fenêtre d’affichage. Il peut s’agir d’un nombre spécifique de pixels, comme width=500, ou il peut s’agir d’une propriété device-with qui correspond à 100 % de la largeur de l’écran.
L’attribut initial-scale contrôle le niveau de zoom au moment du chargement initial.
Les propriétés maximum-scale, minimum-scale et user-scalable contrôlent jusqu’où l’utilisateur peut zoomer sur la page.
Si vous ne voulez pas que les utilisateurs jouent avec l’échelle de l’écran, vous pouvez utiliser la propriété user-scalable=no.
Remarque : L’utilisation de user-scalable=no peut entraîner des problèmes d’accessibilité pour les utilisateurs malvoyants.
Il est possible de spécifier la largeur du champ avec un nombre spécifique dans la balise meta.
<meta name="viewport" content="width=500, initial-scale=1">
En fait, cette structure doit être utilisée si la zone affichée nécessite un minimum de 500 pixels. Cependant, si la largeur de l’écran est supérieure à 500 pixels, le navigateur étendra le contenu pour s’adapter à l’écran avec la propriété initial-scale=1.
Avec une échelle maximale et une échelle minimale, les capacités de zoom à l’écran des utilisateurs peuvent être restreintes. Les plages de valeurs de ces propriétés vont de 0 à 10.0, la valeur par défaut de minimum-scale est 0.25 et la valeur par défaut de maximum-scale est 5.0.
Pour créer une conception réactive, la balise méta de la fenêtre d’affichage est requise pour l’utilisation active de la structure de requête multimédia, qui est une fonctionnalité CSS.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
https://web.dev/responsive-web-design-basics/