Vous l’avez déjà aperçu dans le code source d’une majorité de sites et aussi déjà utilisé par défaut, sans peut-être connaître son utilité. La balise viewport est une balise essentielle à un site web pour le responsive design.
À la création d’un site, vous ajoutez quelques balises « meta » entre les balises « head » de votre code. Parmi, ces balises « meta », on en retrouve une portant le nom de « viewport ».
Dans cet article, vous allez voir quelle est l’utilité de la balise « viewport » et comment vous pouvez l’utiliser.
La balise « viewport » est en réalité une balise « meta » avec un attribut « name » ayant pour valeur « viewport ». Cette balise a été très utile en HTML lors des premières utilisations du web sur mobile.
En effet, avant l’utilisation de cette balise, les sites étaient très mal adaptés à l’utilisation avec un téléphone. Les textes étaient illisibles, les images trop petites, des marges apparaissaient sur les bords de l’écran, etc…
Pour pallier à ce problème, l’une des méthodes mises en place a été d’utiliser la balise « viewport ». Cette balise permet de définir le comportement du « viewport » d’un site en rapport avec sa taille d’écran.
Le viewport c’est une zone de la fenêtre de votre navigateur où sera affiché le contenu d’un site. Cette zone peut souvent ne pas avoir les mêmes dimensions que la page, dans ce cas le navigateur comblera la différence de dimension en ajoutant des barres de défilement.
Si vous souhaitez optimiser votre site pour une utilisation sous mobile, vous devrez ajouter au minimum la balise « viewport ».
Rien de bien compliqué, il vous faudra seulement écrire la ligne de code suivante, entre les balises « head » de votre site, pour utiliser un viewport classique :
<meta name="viewport" content="width=device-width, initial-scale=1.0">La propriété « width » correspond à la largeur du viewport, la zone où sera affiché le contenu d’un site. En y associant la valeur « device-width », vous indiquez que la largeur du viewport doit être égale à la largeur de l’écran de l’appareil que vous utilisez.
Si besoin, vous pouvez indiquer une valeur fixe en pixels à la place de « device-width », par exemple « width= 500 ».
Une propriété identique existe pour la hauteur du viewport, elle se nomme « height » et s’utilise de la même façon que la propriété pour définir la largeur.
Vous pouvez ainsi lui attribuer une valeur fixe en pixels ou bien la valeur « device-height » pour que la hauteur du viewport soit identique à celle de l’écran.
La seconde propriété présente dans cette balise viewport est « initial-scale ». Cette propriété permet de définir un niveau de zoom lors du chargement de la page. Une valeur de « 1 » ou « 1.0 » indique que le zoom sera défini à « 100% ».
De la même manière, vous pouvez définir une valeur de zoom minimale ou maximale, respectivement, grâce aux propriétés « minimum-scale » et « maximum-scale ».
Ces propriétés prennent un nombre décimal en valeur, par exemple « minimum-scale=0.5 » et « maximum-scale=3.0 ».
Pour finir, vous pouvez aussi définir une valeur « yes » ou « no » à la propriété « user-scalable » qui donne la possibilité à l’utilisateur de zoomer ou non.
Voici donc un exemple d’utilisation un peu plus complexe de la balise viewport qui pourrait faire sens :
<meta name="viewport" content="width=device-width, initial-scale=0.80, maximum-scale=2.0, minimum-scale=0.80">
L’utilisation de la balise « viewport » est essentielle pour les sites modernes, car elle joue un rôle dans le responsive design des sites web. Cette balise est utile à un site pour permettre aux utilisateurs d’y accéder avec n’importe quel type d’appareil et taille d’écran sans soucis d’affichage.
Si votre site web a quelques problèmes d’affichages sur mobile ou tablette, vous pourriez éventuellement avoir oublié d’ajouter cette balise à votre code.
N’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui pourra vous aider à ajouter la balise viewport à votre site et améliorer son responsive design.