jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils SEO

Gratuit Generateur de balises meta viewport

Générez un jeu complet de balises meta viewport, theme-color et Apple touch icon.

Chargement de l'outil...

Qu'est-ce que Generateur de balises meta viewport ?

La balise meta viewport controle la maniere dont une page se redimensionne sur les navigateurs mobiles, ce qui en fait l'une des balises les plus importantes pour le design responsive. La balise meta theme-color definit la couleur de la barre du navigateur sur les navigateurs mobiles et les navigateurs de bureau compatibles. Les balises lien Apple touch icon definissent l'icone affichee lorsqu'un visiteur enregistre la page sur l'ecran d'accueil iOS. Ensemble, ces balises forment la couche de presentation mobile de base que toute page HTML moderne devrait inclure, mais chacune a une syntaxe specifique facile a mal gerer.

Réponse rapide

Utilisez la balise meta viewport pour controler la facon dont votre page se redimensionne sur les appareils mobiles. La valeur standard width=device-width avec initial-scale=1 fonctionne pour presque tous les sites responsives et garantit un texte lisible sans necessiter de gestes de zoom.

Last updated: 2026-06-11

Limites

  • theme-color n'affecte la barre du navigateur que sur les navigateurs mobiles pris en charge. Les navigateurs de bureau et certaines configurations de navigateur l'ignorent completement.
  • Les balises Apple touch icon necessitent un fichier image PNG reel au chemin specifie. Un chemin manquant ou incorrect produit une icone brisee silencieusement sur iOS.
  • La balise viewport controle l'echelle initiale mais ne rend pas une mise en page non responsive utilisable sur mobile. Elle doit etre associee a un design responsive utilisant les requetes media CSS.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Reglez la largeur du viewport et l'echelle initiale. Les valeurs standard sont width=device-width et initial-scale=1.
  2. Saisissez une couleur de theme sous forme de valeur hexadecimale, comme #ffffff pour le blanc ou une couleur correspondant a l'en-tete de votre site.
  3. Saisissez le chemin vers votre fichier Apple touch icon. Un PNG de 180 sur 180 pixels est la taille standard.
  4. Copiez toutes les balises generees et collez-les dans la section head de votre page HTML.

A quoi il sert

  • Configurer la balise viewport mobile pour une nouvelle page HTML statique avant le deploiement.
  • Ajouter des balises meta pretes pour PWA, y compris theme-color et Apple touch icons, pour une experience installee sur l'ecran d'accueil.
  • Standardiser les balises meta mobiles sur un modele de site multipage afin que chaque page utilise la meme configuration viewport.

Cas d'usage

Exemples concrets

Exemple

Configuration responsive standard

Une nouvelle page d'atterrissage a besoin de width=device-width, initial-scale=1, d'une couleur de theme blanche et d'une Apple touch icon standard. Le generateur produit les trois balises a partir des champs de saisie.

Exemple

Configuration prete pour PWA

Une application web utilise une couleur de theme bleu marque et une Apple touch icon personnalisee avec un fond transparent. Le generateur cree les balises avec la couleur hexadecimale exacte et le chemin de l'icone.

Erreurs frequentes

  • Definir user-scalable=no, ce qui bloque le pincement pour zoomer et cree un obstacle d'accessibilite pour les utilisateurs malvoyants.
  • Utiliser un chemin d'Apple touch icon incorrect ou manquant, ce qui produit une icone brisee lors de l'enregistrement sur l'ecran d'accueil.
  • Oublier d'inclure viewport-fit=cover pour les pages qui s'etendent dans la zone d'affichage complete sur les telephones a encoche.

Vérification

  1. Ouvrez la page publiee sur un appareil mobile reel et confirmez que le contenu s'adapte a la largeur de l'ecran sans defilement horizontal.
  2. Inspectez les balises generees dans le head HTML a l'aide des outils de developpement du navigateur pour verifier que les chemins viewport, theme-color et Apple touch icon sont corrects.

FAQ

Questions sur Generateur de balises meta viewport

Quelle doit etre la largeur du viewport ?

Utilisez width=device-width pour presque toutes les pages responsives. Cela indique au navigateur d'utiliser la largeur de l'appareil au lieu de supposer un viewport de taille bureau.

Ai-je besoin d'Apple touch icons pour un site qui n'est pas une PWA ?

Les Apple touch icons sont toujours utiles pour les sites web classiques car les utilisateurs iOS peuvent enregistrer n'importe quelle page sur leur ecran d'accueil. Sans icone, iOS utilise une capture d'ecran de la page comme icone.

Dois-je desactiver user-scalable ?

Non. Definir user-scalable=no bloque le pincement pour zoomer et cree un obstacle d'accessibilite pour les utilisateurs malvoyants. WCAG exige que les utilisateurs puissent zoomer les pages jusqu'a 200 % au moins.

Que se passe-t-il si j'omet completement la balise meta viewport ?

Les navigateurs mobiles supposent que la page a ete concue pour un ordinateur de bureau et la rendent a une largeur par defaut d'environ 980 px, puis la reduisent pour l'adapter a l'ecran. Le texte devient minuscule et necessite un zoom pour etre lu. La page peut egalement declencher des erreurs d'utilisabilite mobile dans Google Search Console. Chaque page responsive devrait inclure une balise meta viewport dans le head.

Outils lies

Autres outils outils seo

A essayer aussi

A essayer aussi