Catégorie: Développement
Générateur de balise meta viewport
Générez une balise meta viewport responsive et comprenez ses options
Définissez la largeur, l'échelle initiale, les limites de zoom, l'autorisation de zoom au pincement et le viewport-fit de la balise meta viewport de votre page, avec une brève explication de chaque option, puis copiez la balise finale dans votre <head>. Généré localement dans votre navigateur.
Désactiver cette option bloque le zoom au pincement, ce qui nuit à l'accessibilité — la plupart des sites devraient la laisser activée.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
La balise meta viewport indique à un navigateur mobile comment dimensionner et adapter l'échelle d'une page — sans elle, les téléphones affichent les pages avec une largeur fixe proche d'un ordinateur de bureau et dézooment, ce qui explique pourquoi c'est l'une des premières choses que vérifie un outil de compatibilité mobile. Mettre en place width=device-width et initial-scale=1 couvre le cas courant, mais les limites d'échelle et l'option viewport-fit méritent d'être comprises plutôt que copiées-collées sans réfléchir, car désactiver totalement le zoom pose un problème d'accessibilité pour les personnes malvoyantes.
Mode d'emploi
- Laissez width sur « device-width » sauf si vous avez une raison précise de le changer.
- Définissez une échelle initiale, et éventuellement des limites de zoom minimum/maximum.
- Décidez si vous autorisez le zoom au pincement — il est recommandé de le laisser activé.
- Choisissez une valeur de viewport-fit si votre design doit s'étendre dans l'encoche ou les zones de sécurité.
- Copiez la balise générée dans le <head> de votre page.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Dois-je désactiver user-scalable pour empêcher un zoom « accidentel » ?
- En général non — bloquer le zoom au pincement empêche les visiteurs malvoyants de zoomer pour lire votre contenu, ce qui est signalé par les recommandations d'accessibilité (WCAG 1.4.4). Corrigez plutôt les problèmes de mise en page au lieu de désactiver le zoom.
- Que fait concrètement viewport-fit=cover ?
- Sur les appareils avec une encoche ou des coins arrondis, cela permet à l'arrière-plan de votre page de s'étendre dans ces zones de sécurité (safe-area) au lieu de laisser une bande noire, pendant que vous utilisez les fonctions CSS env(safe-area-inset-*) pour garder le contenu lui-même à l'écart de l'encoche.
- width=device-width est-il toujours correct ?
- Pour la grande majorité des sites responsives, oui — cela fait correspondre le viewport CSS à la largeur naturelle de l'appareil pour que vos points de rupture responsives se comportent de façon prévisible.