web-dev-qa-db-fra.com

Qu'est-ce que viewport en HTML?.

Qu'est-ce que viewport en HTML? Pourriez-vous donner quelques exemples sur la façon d'accéder aux détails de la fenêtre?

64
minil

La fenêtre d'affichage est la partie de la page Web que l'utilisateur peut actuellement voir. Les barres de défilement déplacent la fenêtre d'affichage pour afficher d'autres parties de la page.

Suivez les instructions de cet article pour obtenir les dimensions de la fenêtre d'affichage en Javascript .

if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
65
Matchu

Je pense que la ViewPort est juste une zone pour afficher le contenu Web dans le navigateur. Et différents navigateurs ont leur propre paramètre pour la taille de ViewPort. Par exemple, la largeur par défaut ViewPort de Safari est de 980 pixels. Par conséquent, si la page Web que vous souhaitez voir mesure moins de 980 pixels, le Safari doit comporter une zone d'affichage vide lors de l'accès à la page Web dans le Safari par défaut. C'est pourquoi nous avons parfois besoin de configurer ViewPort pour un meilleur affichage du contenu Web dans le navigateur.

Comme ci-dessous, par exemple:

<meta name="viewport" content="width=device-width">

Et aussi s'il vous plaît lire réponse de Paul . Je pense qu'il a déjà expliqué l'utilisation de ViewPort.

12
Joe.wang

La fenêtre d'affichage est une zone virtuelle utilisée par le moteur de rendu du navigateur pour déterminer la mise à l'échelle et la taille du contenu lors de son rendu initial sur l'écran actuel. Cela vous aidera

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

6
vicky

La fenêtre d'affichage est la zone visuelle de votre page Web sur un navigateur. En utilisant le <meta name="viewport", vous pouvez définir la manière dont le contenu de votre site est rendu sur différents appareils . Personnellement, j'aime utiliser: <meta name="viewport" content="width=device-width, initial-scale=1.0>

0
aditya