Viewport
Le viewport représente la zone visible d'une page web sur un appareil donné, c’est-à-dire la partie de l'écran dans laquelle le contenu d’un site web est affiché. Le concept de viewport est essentiel pour la conception responsive, car il définit l’espace disponible pour afficher le contenu d’un site, et les styles CSS peuvent être ajustés en fonction de cette taille.
Dans un site responsive, on utilise une balise <meta> dans le <head> pour contrôler la taille du viewport. Cela permet de s’assurer que le contenu de la page s’adapte correctement à la largeur de l'écran.
width=device-width : Cette partie de la balise définit la largeur du viewport en fonction de la largeur de l’écran de l’appareil (c'est-à-dire la largeur de l’écran du périphérique utilisé). Par exemple, sur un téléphone, cela permettra à la page de s’ajuster à la largeur de l’écran.
initial-scale=1: Définit le niveau de zoom initial. La valeur 1 signifie qu'il n'y a pas de zoom au départ.
Comportement du Viewport
*Sur un ordinateur de bureau *: Le viewport est généralement la fenêtre du navigateur, qui peut être redimensionnée. Le contenu de la page web peut être ajusté à la largeur du viewport.
Sur un appareil mobile : Le viewport correspond à la zone visible de l'écran de l'appareil. Sans la balise <meta>, le navigateur mobile affichera la page avec une largeur fixe (souvent 980px), ce qui entraînera un dézoom pour adapter le contenu à la taille de l'écran.