Le viewport est la zone visible d'une page web dans la fenêtre du navigateur. En web design responsive, la balise meta viewport permet de contrôler comment la page s'affiche sur différents appareils.
Pourquoi le viewport est important ?
- Responsive design : Adaptation aux écrans
- Mobile-first : Essentiel pour l'indexation Google
- UX mobile : Lisibilité et navigation
- Core Web Vitals : Impact sur CLS (stabilité visuelle)
La balise meta viewport
Code à placer dans le <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">
Paramètres du viewport
- width=device-width : Largeur adaptée à l'appareil
- initial-scale=1 : Pas de zoom initial
- maximum-scale : Zoom maximum autorisé
- minimum-scale : Zoom minimum autorisé
- user-scalable : Autoriser/bloquer le zoom
Bonnes pratiques
- Toujours définir le viewport : Obligatoire pour le responsive
- width=device-width : Adapter à tous les écrans
- Ne pas bloquer le zoom : Problème d'accessibilité
- initial-scale=1 : Éviter les comportements imprévus
Impact SEO
- Mobile-First Indexing : Google vérifie le viewport
- Test d'optimisation mobile : Viewport obligatoire
- Core Web Vitals : Évite les problèmes de CLS
- Expérience utilisateur : Signal indirect de qualité
Erreurs courantes
- Viewport manquant : Page non optimisée mobile
- width fixe en pixels : width=1024 au lieu de device-width
- user-scalable=no : Bloque l'accessibilité
- maximum-scale=1 : Empêche le zoom
Viewport et CSS
Les unités CSS relatives au viewport :
- vw : 1% de la largeur du viewport
- vh : 1% de la hauteur du viewport
- vmin : Plus petite dimension
- vmax : Plus grande dimension
Vérification
- Google Search Console : Rapport d'ergonomie mobile
- Test d'optimisation mobile : Outil Google gratuit
- DevTools navigateur : Mode responsive
- Lighthouse : Audit SEO et accessibilité