Analyse des étiquettes de la fenêtre et une utilisation CSS associée dans le développement mobile HTML5

Cet article présente principalement l'étiquette de la fenêtre et l'analyse d'utilisation CSS connexe dans le développement mobile HTML5. La fenêtre est souvent appelée fenêtre ou fenêtre, et joue un rôle important dans la disposition mobile et l'adaptation d'écran. Les amis qui en ont besoin peuvent y faire référence.

La fenêtre (fenêtre) couramment mentionnée dans la zone frontale mobile est la zone d'écran où le navigateur affiche le contenu de la page. Plusieurs concepts importants impliqués sont la relation entre la DIP (pixel de logique de périphérique pixels indépendant de l'appareil) et les pixels CSS. Ici, nous comprenons d'abord les concepts suivants.

Généralement, les navigateurs sur les appareils mobiles définissent une balise META de la fenêtre par défaut, en définissant une fenêtre de mise en page virtuelle pour résoudre le problème de l'affichage de la page de première page sur les téléphones mobiles. iOS et Android ont essentiellement défini la résolution de cette fenêtre sur 980px, de sorte que les pages Web sur le PC peuvent essentiellement être présentées au téléphone, mais les éléments semblent très petits, et les pages Web peuvent généralement être à l'échelle manuellement par défaut.

La fenêtre visuelle (fenêtre visuelle) fournit la zone visuelle de l'écran physique, les pixels physiques de l'écran, la même taille de l'écran, l'appareil à densité élevée de pixels et les pixels matériels seront plus. Par exemple, les pixels physiques de l'iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Affichage idéal et plongeon (Pixels Logic Device)

La fenêtre idéale est généralement ce que nous appelons la résolution d'écran.

DIP (Pixel de logique de périphérique) n'a rien à voir avec le pixel matériel de l'appareil. Un DIP occupe le même espace sur un écran d'appareil de toute densité de pixels.

Par exemple, les pixels matériels de l'affichage de l'écran de la rétine de MacBook Pro sont: 2880 * 1800. Lorsque vous définissez la résolution de l'écran sur 1920 * 1200, la valeur de largeur de la fenêtre idéale est de 1920 pixels et la valeur de largeur de la DIP est 1920. Le rapport pixel de périphérique est de 1,5 (2880/1920). La relation entre la largeur du pixel logique et la largeur physique des pixels (résolution de pixels) du dispositif satisfait la formule suivante:

La résolution de l'écran du téléphone mobile n'est généralement pas autorisée. Il s'agit généralement d'une valeur fixe définie par le fabricant d'appareils par défaut. En d'autres termes, la valeur du DIP est la valeur de la fenêtre idéale (c'est-à-dire la résolution). Par exemple, la résolution d'écran de l'iPhone:

iPhone5: Résolution 320 * 568, Pixels physiques 640 * 1136, @ 2X

iPhone6: Résolution 375 * 667, Pixels physiques 750 * 1334, @ 2X

iPhone6 ​​Plus: Résolution 414 * 736, Physical Pixels 1242 * 2208, @ 3x, (Notez que le rapport d'image affiché réel est réduit à 1080 × 1920, les raisons spécifiques seront introduites à la fin de notre article)

Unités CSS Pixels (PX) utilisées pour la disposition des pages. La taille des pixels du style (par exemple la largeur: 100px) est spécifiée dans les pixels CSS. Le rapport des pixels CSS à DIP est le rapport de mise à l'échelle de la page Web. Si la page Web ne fait pas l'échelle, un pixel CSS correspond à un DIP (Pixel de logique de périphérique).

Utilisez la balise méta de la fenêtre pour contrôler la disposition

Tout d'abord, jetons un coup d'œil aux propriétés extrêmes de l'étiquette Meta de la fenêtre: