La vue d’un site sur les téléphones mobiles va être différente de la vue de nos navigateurs. Il est donc nécessaire de mettre en place une petite adaptation qui passe par la définition du viewport pour les mobiles.
Le viewport
Le viewport est l’affichage de notre site dans le navigateur. Mais les mobiles ne sont pas prévus pour naviguer de la même façon à cause de leur navigation tactile ce qui génère des différences de visualisation.
D’autre part les mobiles trichent sur leur viewport qui ne correspond pas à la taille réelle de l’écran mais est généralement plus grande.
Solution
Pour tenir compte de cette différence et pouvoir optimiser la vue sur mobile il est nécessaire de renseigner la balise meta viewport comme suit :
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
- « width » : s’adapte à la largeur de la fenêtre du mobile
- « initial-scale » : initialise le zoom de départ
- « shrink-to-fit » : adaptation pour Safari 9.0 pour éviter que la page montre des éléments qui sont en dehors du viewport.
D’autres options peuvent être ajoutées à la balise viewport mais elles ne sont pas spécialement recommandées comme :
- « height » : s’adapte à la hauteur de la fenêtre mobile
- « minimum-scale » : niveau de zoom minimum
- « maximum-scale » : niveau de zoom maximum
- « user-scalable » : permet à l’utilisateur de zoomer ou pas
- « target-densitydpi » : choix de la résolution en dpi
Sources de l’article
- « Comprendre le Viewport dans le Web mobile » : suivre ce lien.
- « The Problem with iOS Safari and shrink-to-fit » : suivre ce lien.
- « What does the shrink-to-fit viewport meta attribute do ? » : suivre ce lien.