résumé de la fenêtre HTML5

Cet article concerne la viewport en HTML5 Pour les étudiants qui ne sont pas familiers avec la viewport en HTML5, nous pouvons jeter un œil à cet article ensemble ! Regardons en détail la fenêtre d'affichage en HTML5

Pour résumer, cela s'articule simplement autour de trois questions :
1 Pourquoi mettre en place une fenêtre virtuelle
Au départ, il s'agit de faire la résolution ? de la fenêtre virtuelle proche de celle du PC. De cette façon, la fenêtre virtuelle peut toujours afficher entièrement le contenu de la page, mais le contenu de la page est relativement petit et vous devez zoomer manuellement pour voir clairement la page.
2. A quoi sert l'ajout d'une fenêtre d'affichage ?
L'ajout d'une fenêtre d'affichage sert à faciliter l'optimisation du terminal mobile. Définissez la largeur de la fenêtre virtuelle sur device-width, qui est la même que les pixels physiques de l'appareil, afin que nous puissions contrôler le mode d'affichage de l'interface mobile de la page via les médias.
3. La relation entre la largeur de l'écran de l'appareil (c'est-à-dire les pixels physiques de l'appareil) et la résolution
En prenant l'iPhone 6 comme exemple, la taille réelle de l'écran est de 375*667, mais sa résolution atteint 750*. 1334. Les deux sont des concepts différents.
La taille physique fait référence à la taille réelle de l'écran. Un grand écran doit également être équipé d'une haute résolution, c'est-à-dire du nombre de pixels pouvant être affichés à cette taille. Plus il y a de pixels affichés, plus la marge d'expression est grande. Les écrans des deux téléphones mobiles ont à peu près la même taille, mais l'un ne peut afficher que deux lignes de caractères chinois, tandis que l'autre peut afficher cinq lignes de caractères chinois. Quelle que soit la différence de taille de police, la clé est la résolution de l'écran. Ce dernier a une résolution plus grande, donc naturellement la même police peut être utilisée. Plus de lignes de caractères chinois peuvent être affichées sous la taille. Les téléphones mobiles à écran couleur sont en effet bons, mais sans performances d'écran de résolution suffisamment grandes, quelle que soit la qualité des couleurs, à quoi ça sert.

---

Expliquons le rôle de la fenêtre d'affichage et comment elle est combinée avec le média.
Un p de 50 pixels de large peut être parfait lorsqu'il est affiché sur un navigateur PC, mais il apparaîtra trop grand s'il est affiché sur un navigateur mobile. Comment résoudre ce problème ? Apple a trouvé un moyen : il a défini la balise méta viewport dans la version mobile (iOS) de Safari. Sa fonction est de créer une fenêtre virtuelle (viewport), et la résolution de cette fenêtre virtuelle est proche de celle du moniteur du bureau d'Apple. positionné, il fait 980px. Autrement dit, lorsque j'ouvre une page dans le navigateur, la largeur de cette page est de 980 pixels, et non la largeur physique de l'écran.
Prenons Safari sous l'iPhone 6 comme exemple :
Sur l'écran physique de 375px de l'iPhone 6 - la fenêtre visuelle, une fenêtre virtuelle de 980px - la fenêtre de mise en page (layout viewport) est créée dans la fenêtre visuelle (Dans le visuel. viewport), nous pouvons faire glisser les barres coulissantes horizontales et verticales ou zoomer et dézoomer sur la page Web pour obtenir le meilleur effet de navigation (similaire à un navigateur de bureau) et la fenêtre de mise en page est utilisée pour restituer la mise en page en conjonction avec CSS. Par exemple, lorsque nous définissons Lorsque la largeur d'un conteneur est de 100 %, la valeur réelle du conteneur est de 980 px au lieu de 375 px. De cette manière, la plupart des pages Web peuvent être affichées normalement sur l'écran du téléphone mobile sous une forme agrandie.

Quelle est la taille réelle de la fenêtre virtuelle 980px sur l'écran
Les pixels physiques de l'écran de l'iPhone 6 sont de 375 pixels et la largeur de la fenêtre virtuelle est de 980 pixels. La taille de 1 px des deux n'est pas à attendre. Pour le dire plus simplement, ce px n'est pas celui utilisé pour décrire. la taille de la fenêtre réelle, c'est-à-dire la fenêtre visuelle. L'un est utilisé pour décrire la taille de la fenêtre virtuelle, ce qui n'a rien à voir avec cela. (Vous pouvez utiliser chromn pour vérifier la largeur de la page dans les navigateurs PC et mobiles.)

• La taille de la fenêtre virtuelle par défaut du navigateur Safari, du navigateur Opera et du navigateur Chromn est de 980 pixels. Le Navigateur Firefox active le mode mobile par défaut et la largeur de sa fenêtre virtuelle correspond à la largeur de l'appareil.

  Après la création de la fenêtre virtuelle sur le smartphone, un autre problème est survenu. Après l'ouverture de la page Web du PC dans le navigateur mobile, la police et les autres éléments sont apparus relativement petits, ce qui les a rendus relativement petits. difficile à regarder. La mise à l’échelle manuelle est plus gênante. Apple a également créé une fenêtre pour ajuster la taille de la fenêtre virtuelle. Généralement, nous écrirons

<meta name="viewport" content="width =device-width,initial-scale=1,user-scalable=1">

device-width signifie que la taille de la fenêtre virtuelle est égale à. la largeur physique des pixels de l'appareil. Cela nous permet d'utiliser plus facilement des supports pour écrire une page spécifiquement adaptée au terminal mobile, afin que nous puissions voir une page de taille appropriée sur le terminal mobile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!