Fenêtre


Responsive Web Design - Viewport

Qu'est-ce que Viewport ?

Viewport est la zone visible de la page Web de l'utilisateur.

viewport traduit en chinois peut être appelé « viewport ».

Les navigateurs mobiles placent la page dans une « fenêtre » virtuelle (port d'affichage). Habituellement, cette « fenêtre » virtuelle (port d'affichage) est plus large que l'écran, de sorte que chaque page Web n'a pas besoin d'être compressée dans un petit espace. taille. Dans une fenêtre (ce qui briserait la mise en page des pages Web qui ne sont pas optimisées pour les navigateurs mobiles), les utilisateurs peuvent effectuer un panoramique et un zoom pour voir différentes parties de la page Web.

Définir la fenêtre d'affichage

Une balise méta de fenêtre d'affichage couramment utilisée pour les pages optimisées pour les pages Web mobiles est à peu près la suivante : 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • largeur : contrôle La taille de la fenêtre d'affichage peut être spécifiée sous la forme d'une valeur, telle que 600, ou d'une valeur spéciale, telle que la largeur du périphérique, qui correspond à la largeur du périphérique (les unités sont des pixels CSS lors d'un zoom à 100 %).

  • hauteur : Correspondant à la largeur, précisez la hauteur.

  • initial-scale : taux de mise à l'échelle initial, c'est-à-dire le taux de mise à l'échelle lorsque la page est chargée pour la première fois.

  • échelle maximale : le rapport maximum auquel l'utilisateur est autorisé à zoomer.

  • échelle minimale : le rapport minimum sur lequel l'utilisateur est autorisé à zoomer.

  • user-scalable : indique si l'utilisateur peut zoomer manuellement.

Les exemples suivants démontrent l'effet de l'utilisation de la fenêtre d'affichage et de la non-utilisation de la fenêtre d'affichage sur le terminal mobile :

Exemple 1. Aucune fenêtre d'affichage n'est ajoutée

1.png

Exemple 2. Ajouter une fenêtre

2.png