La balise viewport permet au site web visité d'utiliser un affichage différent en fonction du navigateur utilisé (donc en fonction de l'appareil).

>> Téléchargement : Le guide et les modèles pour la refonte de votre site web

Si vous ne configurez pas correctement la balise viewport, vous condamnez vos visiteurs sur mobile à manoeuvrer pour zoomer et faire défiler le contenu à l'écran, voire à faire machine arrière pour choisir un autre site moins contraignant. Cela est d'autant plus dommageable que les visites sur mobile sont en augmentation constante par rapport aux ordinateurs de bureau.

Si votre site web est conçu sur le CMS de HubSpot, vous n'avez pas à vous inquiéter de la configuration de la balise viewport. Votre site est responsive par défaut. 

Mais dans le cas contraire, même si vous utilisez un design adaptatif, vous devrez configurer la balise viewport pour offrir une bonne expérience à vos visiteurs sur mobile.

Comment simplifier la refonte de votre site ?

Téléchargez ce guide et découvrez les bonnes pratiques et modèles pour favoriser la prochaine refonte de votre site.

À quoi ressemble un site avec et sans balise viewport ?

Lorsque la balise viewport n'est pas configurée pour les appareils mobiles, ces derniers affichent une page web de la largeur d'un ordinateur de bureau type entre 800 et 1 024 pixels, puis l'adaptent à l'écran pour afficher un texte et des graphiques minuscules.

Lorsque vous configurez la balise viewport pour les appareils mobiles, la largeur de la page web s'ajuste automatiquement à la taille de l'appareil mobile de l'utilisateur, lui offrant une bien meilleure expérience.

Ci-dessous, l'écran à gauche n'a pas de viewport configuré et le navigateur mobile se base sur la largeur d'un ordinateur de bureau. L'écran à droite a une balise viewport configurée et l'affichage est adapté à la page à la largeur de l'appareil pour que le contenu soit lisible.

viewport-1.png

Crédit image : Google Developers

Pour vérifier si un viewport est déjà configuré, utilisez le test d'optimisation mobile de Google. Collez votre URL dans le champ vide et cliquez sur Tester. L'outil fera passer le test de compatibilité mobile de Google à votre site web et vous dira si votre balise viewport est configurée ou non.

Comment configurer la balise viewport de votre site web ?

Pour configurer un viewport mobile, il suffit d'ajouter une balise viewport à toutes les pages web que vous voulez adapter aux mobiles.

Pour cela, copiez simplement l'extrait de code HTML ci-dessous et collez-le dans l'en-tête de votre site.

<meta name=viewport content="width=device-width, initial-scale=1">

Dans de nombreux cas, en plaçant cette balise viewport dans le fichier d'en-tête, vous le répercutez sur tout le site web et rendez ainsi votre site plus compatible avec les mobiles. Sachez toutefois qu'il peut être nécessaire d'ajouter la balise viewport sur chaque page, en particulier si vous utilisez un logiciel différent pour votre site web et vos pages de destination

Si vous n'utilisez pas de solution intégrée telle que le COS de HubSpot, vous devrez vérifier manuellement que vos pages de destination, pages de site et articles de blogs intègrent cette balise viewport.

Note : en ajoutant cette balise, le design du site web ne deviendra pas adaptatif, car c'est un tout autre processus. Néanmoins, il évitera aux utilisateurs sur mobile d'avoir à zoomer et à faire défiler le contenu pour lire et interagir avec votre site web.

La balise <device-width>

Ne pas modifier la balise <device-width> signifie que vous ne souhaitez pas définir une largeur spécifique pour l'affichage de votre contenu. Votre page web s'adaptera automatiquement à la taille de l'appareil de l'utilisateur. C'est le choix de la majorité des entreprises.

Si, pour une raison quelconque, vous voulez afficher un contenu spécifique pour un appareil spécifique, vous indiquerez alors la largeur en pixels de l'appareil en question. En définissant une largeur dans la balise (ce qui n'est pas obligatoire), les appareils afficheront le contenu dans cette largeur.

Veuillez noter que cette option n'est généralement pas recommandée, sauf si vous avez conçu une page/un site pour une taille d'écran spécifique. Par ailleurs, vous ne pouvez pas définir plusieurs balises viewport. Une fois que vous aurez choisi une taille d'appareil, vous devrez vous y tenir.

La largeur des téléphones varie mais si vous voulez que votre site s'affiche d'une certaine manière sur un iPhone 6 en mode paysage, sachant que l'iPhone 6 a une largeur de 667 px en mode paysage, vous devez ajouter la balise suivante à votre site :

<meta name=viewport content="width=667, initial-scale=1">

Pour les iPad, qui ont une largeur de 1 024 px en mode paysage, vous devrez ajouter cette balise à votre site :

<meta name=viewport content="width=1024, initial-scale=1">

Voici sur le lien suivant, une liste complète des tailles de viewport pour référence.

N'oubliez pas qu'en déterminant que la largeur de votre page est égale à celle de l'appareil, vous rencontrerez certainement des problèmes lorsque les utilisateurs changeront l'orientation de leurs appareils mobiles.

Pour contourner ce problème, vous pouvez utiliser JavaScript afin de choisir de manière conditionnelle les attributs à utiliser, mais la solution la plus simple consiste à ignorer la largeur et conserver la valeur « device-width ».

La partie « initial-scale » de la balise HTML peut conserver la valeur 1 dans tous les cas. Elle est simplement là pour s'assurer que la mise en page est bien affichée à l'échelle 1:1 lorsqu'une personne ouvre votre contenu. Votre page web peut ainsi tirer avantage de toute la largeur du mode paysage, et ce peu importe l'orientation de l'appareil mobile (portrait ou paysage).

Pour aller plus loin, téléchargez ce guide gratuit et découvrez les bonnes pratiques pour favoriser la prochaine refonte de votre site.

Le guide indispensable pour la refonte de votre site web

Publication originale le 19 octobre 2017, mise à jour le 20 mai 2021

Sujet(s):

Création de site internet