15/04/2022

La Balise Viewport Meta

HTML Viewport Tag

La fenêtre d’affichage dans le navigateur est la zone de la fenêtre où le contenu Web est affiché.

Viewport Meta Tag

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.

HTML Viewport Meta Tag

*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.

Développement de la balise Meta Viewport

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.

Principes de base des fenêtres

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.

 

HTML Viewport Meta Tag

initial-scale=0

HTML Viewport Meta Tag

initial-scale=1

HTML Viewport Meta Tag

initial-scale=2

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.

Largeur de la fenêtre et largeur de l’écran

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.

Zoom Level

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.

Viewport & Media Query Relationship

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://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

https://web.dev/responsive-web-design-basics/