Garantit que les visiteurs peuvent pincer / zoomer sur mobile — essentiel pour la basse vision et la lisibilité générale.
Ce que c’est
La balise viewport <meta> contrôle la mise en page mobile. De mauvaises valeurs (p. ex. désactiver le zoom) bloquent l’agrandissement et contreviennent aux attentes d’accessibilité courantes.
Pourquoi c’est important
- Basse vision : jusqu’à ~500 % de zoom est un besoin réel fréquent
- Tout le monde : texte plus net sur petits écrans
- WCAG : s’aligne avec 1.4.4 (redimensionnement) et 1.4.10 (reflow) combiné à du CSS responsive
- Responsive : device-width s’associe aux mises en page fluides
Notes WCAG
- 1.4.4 Redimensionner le texte : les utilisateurs doivent pouvoir zoomer jusqu’à ~200 %
- 1.4.10 Reflow : à ~400 % de largeur, le contenu doit se réorganiser sans défilement bidimensionnel (selon la mise en page)
Propriétés que l’extension peut corriger
- width=device-width : correspondre à la largeur de l’appareil (recommandé)
- user-scalable=yes : autoriser le zoom
- initial-scale=1 : base 100 %
- maximum-scale : si présent, ne pas plafonner sous 5,0 ; le retirer est souvent préférable
Réglages
Activer la correction du viewport :
- Bascule globale
- Recherche la balise viewport dans la sortie et la normalise
Contrôles des propriétés :
- Garantir width=device-width
- Garantir user-scalable=yes (retirer ou remplacer user-scalable=no)
- Garantir initial-scale=1
Zoom maximal :
- Ajuster ou supprimer maximum-scale
- Supprimer le plafond autorise un zoom illimité (souvent la meilleure posture WCAG)
- Si vous gardez un plafond, utilisez au moins 5.0
Repli JavaScript (expérimental) :
- Si le thème omet le viewport ou l’imprime mal placé, le JS peut en injecter un — moins fiable que les correctifs côté serveur
Vérification viewport intégrée
La vérification responsive du viewport charge la page d’accueil publique et évalue la configuration détectée au moyen de cinq contrôles clairs :
- Largeur de l’appareil (
width=device-width) - Échelle initiale
- Autorisation de l’agrandissement
- Zoom maximal
- Nombre de balises viewport
Un résumé classe le résultat comme correct, à améliorer ou problématique. Lorsque cela est possible, les valeurs recommandées peuvent être sélectionnées directement dans les réglages. Enregistrez ensuite les réglages pour les appliquer au site.
Ouvrez Afficher les détails techniques pour consulter l’URL vérifiée et les balises viewport complètes détectées. La vérification utilise un état de chargement qui reprend la structure du résultat final et distingue les erreurs de connexion ou d’analyse des problèmes de configuration. La mise en page s’adapte aux téléphones, tablettes et ordinateurs.
Ouvrez Aide pour consulter un guide compact sur la configuration sûre du viewport. Sur téléphone, il apparaît sous forme de bottom sheet pouvant être fermé par un glissement vers le bas ; sur les écrans plus larges, il utilise une boîte de dialogue. Il explique les valeurs recommandées, le fonctionnement de la vérification, quand utiliser la solution de secours JavaScript, les étapes de cache nécessaires et les critères WCAG 1.4.4 et 1.4.10.
Exemples
Exemple 1 : défaut solide
Activez width, user-scalable, initial-scale ; supprimez entièrement maximum-scale pour un zoom sans limite.
Exemple 2 : si vous devez plafonner le zoom
Réglez maximum-scale à au moins 5,0. Sans plafond reste préférable.
Exemple 3 : le thème n’a pas de balise
Essayez le repli JS seulement après avoir confirmé que le thème ne peut pas ajouter le viewport en PHP ; retestez sur appareils réels.
Conseils
- Utilisez la vérification intégrée après changement de thème
- Préférez retirer maximum-scale
- Évitez user-scalable=no
- Après modification, videz les caches WordPress / serveur / CDN / navigateur — le viewport est souvent fortement mis en cache
- Testez le zoom sur navigateurs iOS et Android
- Traitez le repli JS comme dernier recours
Problèmes courants
Balise viewport introuvable
Vérifiez que le thème affiche <meta name="viewport">. Sinon, ajoutez-la au thème ou activez le repli.
Modifications invisibles
Videz les caches ; un en-tête HTML obsolète en est souvent la cause.
Notes techniques
- Un filtre côté serveur ajuste la première balise meta viewport dans
<head> - S’il existe plusieurs balises, seule la première est normalisée
- L’injection JS est au mieux de l’effort
- 1.4.4 / 1.4.10 dépendent aussi du CSS (reflow, points de rupture) — pas du viewport seul
Disponible pour : tous les plans Free