Le
viewport
(≠ device-width) est une valeur propre à chaque device et est attribuée par le navigateur sur lequel on navigue, par exemple :
- Viewport Safari mobile : 980px
- Viewport Android 1, 2 et 3 : 800px
- Viewport Android 4 : 980px
Meta par défaut à ajouter au code :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
❓ Le zoom initial de l'affichage de l'écran est automatiquement calculée de cette façon :
device-width/viewport
- width : Permet de définir la largeur par défaut
- height : Permet de définir la hauteur par défaut
- initial_scale : Niveau de zoom initial (device-width/viewport) (1.0 par défaut)
- minimum_scale : Niveau de zoom minimal, impossible de dézoomer en dessous de cette valeur
- maximum-scale : Niveau de zoom maximal, impossible de zoome au dessus de cette valeur
- user-scalable : Autorise ou non l'utilisateur à zoomer (ex : user-scalable="yes")
- shrink-to-fit=no : Empêche Safari de réduire le contenu de la page pour s'adapter automatiquement
Pour adapter au mieux son affichage et rendre son site ressponsive, les média queries sont souvent indispensables :
@media screen and (max-width: 769px) {.Exemple{ background: red;} }
Permet d'agir en fonction de la largeur de l'écran
@media screen and (max-height: 800px) {.Exemple{ background: purple;} }
Permet d'agir en fonction de la hauteur de l'écran
@media screen and (min-resolution: 250dpi) {.Exemple{ background: orange;} }
Permet d'agir en fonction de la résolution de l'écran (permet de contrôler le zoom)