Générateur de balise meta viewport pour site responsive

Choisissez device-width pour la déclaration standard adaptée aux mobiles, ou saisissez une largeur numérique positive pour définir volontairement un viewport fixe, puis réglez l’échelle initiale. Le résultat comprend une balise HTML complète prête à copier dans le head du document, sa valeur content et des paramètres normalisés pratiques pour les scripts, les modèles, les tests et les chaînes de build automatisées.

Choisissez délibérément la largeur du viewport

Une déclaration viewport indique au navigateur mobile comment le viewport de mise en page doit se rapporter à l’écran. Pour la plupart des sites responsive, device-width est le bon réglage : il suit la largeur de l’appareil en pixels CSS et permet aux media queries de réagir à l’espace disponible. Ce générateur accepte également une largeur numérique positive lorsqu’un viewport fixe et maîtrisé est réellement nécessaire, par exemple pour une ancienne interface intégrée, un scénario de navigateur reproductible ou un test de compatibilité. Saisissez le nombre sans suffixe px : 375 est valide, tandis que 375px ne constitue pas une largeur valable dans cette déclaration. Le zéro, les valeurs négatives, les entrées vides, les valeurs non finies et les mots arbitraires sont refusés au lieu d’être placés dans un balisage trompeur. La largeur renvoyée est normalisée : un texte numérique tel que 375 devient le fragment stable width=375. Cette validation ciblée rend le résultat fiable en automatisation, sans correction orthographique cachée ni supposition dépendant du navigateur.

Réglez l’échelle initiale et copiez la balise

L’échelle initiale détermine le niveau de zoom au premier chargement de la page. La valeur 1 est le choix habituel : un pixel CSS correspond à un pixel CSS du viewport avant que l’utilisateur n’effectue un zoom. Le champ vaut 1 par défaut, mais vous pouvez fournir un autre nombre positif et fini pour un besoin précis de test ou d’application. Le générateur valide ce réglage séparément et en conserve le sens numérique dans une forme textuelle stable. Il produit ensuite une balise complète telle que <meta name="viewport" content="width=device-width, initial-scale=1">. Placez-la dans le head du document, de préférence une seule fois, plutôt que d’ajouter plusieurs déclarations viewport dont l’interaction peut varier selon le navigateur. La réponse expose aussi la chaîne content et les champs normalisés width et initial_scale. Utilisez meta_tag pour écrire du HTML, content lorsqu’un framework attend seulement cet attribut, et les champs individuels pour contrôler une configuration en test. Aucune requête réseau, inspection de page ou détection du user agent ne modifie le résultat : une même entrée produit toujours une même sortie dans le navigateur et par API.

Comprenez ce que le générateur n’ajoute pas

Cette capacité ne génère volontairement que width et initial-scale. Elle n’ajoute ni maximum-scale, ni minimum-scale, ni user-scalable, viewport-fit, interactive-widget ou autre directive facultative, car ces réglages relèvent de décisions produit et d’accessibilité, et non de valeurs automatiques. Restreindre le zoom peut notamment compliquer la lecture pour les personnes qui ont besoin d’agrandir le contenu ; un petit générateur ne doit donc pas introduire silencieusement ce comportement. L’outil n’audite pas non plus une page existante, ne détecte pas les balises en double, ne teste pas les breakpoints responsive et ne prouve pas que le CSS s’adapte correctement. Il crée un balisage déterministe à partir des deux réglages fournis. Après son ajout, examinez la page sur des écrans étroits et larges, vérifiez la lisibilité du texte et l’absence de débordement des contrôles, puis testez le zoom dans de vrais navigateurs. Dans un projet à modèles, conservez la déclaration dans le composant head commun. L’utilisation interactive est gratuite dans le navigateur ; une requête API automatisée coûte $0.002. Le même solveur pur alimente les deux parcours, donc une balise testée manuellement conserve son format et ses règles de validation dans un script de build.