Explication détaillée de la fenêtre d'affichage pour le terminal mobile HTML5

Tout le monde a rencontré le problème de la viewport sur les pages mobiles. Il existe de nombreux articles sur viewport, je recommande à tout le monde ces deux articles, qui sont très détaillés.

Cet article apporte quelques ajouts à la fenêtre d'affichage

Écran du téléphone portable

L'écran du téléphone portable est un attribut matériel, et nous ne pouvons pas l'affecter que ce soit via JS ou méta balises .

• Les pixels physiques de l'écran du téléphone mobile sont ce que les fabricants de téléphones mobiles appellent pixels, résolution, PPI, etc.

Les formats courants pour Android sont 720X1280, 1080X1920, etc.
L'iPhone est l'iPhone5 640X1136, l'iPhone6 ​​​​750X1334, l'iPhone6P 1080X1920

• Logique de l'écran du téléphone portable Pixel, le nombre de pixels après la conversion physique des pixels. C'est-à-dire la taille de la fenêtre d'affichage idéale

L'écran de l'iPhone5 mesure à l'origine 640 px de large, mais il est converti en 320 px
Les pixels physiques de l'iPhone6 ​​​​​​sont un modèle de 750 px, convertis en 375 px
L'iPhone 6P est un peu bizarre, les pixels physiques font en fait 1080 px de large, mais l'exposition du système est bien de 1242 px, puis convertie en 414px

screen.width/height Vous pouvez obtenir les pixels logiques de l'écran

fenêtre de mise en page fenêtre de mise en page

Les pixels physiques et les pixels logiques de l'écran juste mentionnés sont tous définis par le fabricant du téléphone mobile, et nous ne pouvons pas le configurer. Le point clé ici est de le configurer, alors ne le confondez pas avec les deux fenêtres suivantes.

la fenêtre de mise en page est équivalente à la largeur du navigateur.
Nous pouvons le définir via .
Par défaut, la fenêtre de présentation a généralement une largeur de 980 px.

document.documentElement.clientWidth peut obtenir la largeur de la fenêtre de mise en page.

Fenêtre visuelle de la fenêtre visuelle

La fenêtre visuelle peut être considérée comme une fenêtre aussi grande que l'écran du téléphone portable, mais le nombre de pixels qu'elle peut afficher n'est pas autant de pixels logiques sur l'écran .

La fenêtre d'affichage visuelle n'est pas facile à comprendre, bien que les pixels logiques de l'écran du téléphone mobile aient été corrigés, par exemple, l'iPhone5 fait 320 pixels.

Mais l'écran fait 320 px de large, mais il peut afficher un contenu de 980 px de large, donc la largeur de la fenêtre visuelle est de 980 px.
De nombreuses pages Web qui ne sont pas adaptées aux appareils mobiles, lorsque nous les ouvrons sur les téléphones mobiles, nous constatons que les pages Web sont réduites à la largeur de l'écran du téléphone mobile.

Le point clé est le zoom, qui permet à l'écran 320px d'afficher plus de contenu.
window.innerWidth peut obtenir la largeur de la fenêtre visuelle.

La largeur de la fenêtre visuelle peut être définie via .
La largeur de la fenêtre visuelle est screen.width / initial-scale
En même temps, cela affectera également la largeur de la fenêtre de mise en page, car la largeur de la fenêtre de mise en page est toujours supérieure ou égale à la largeur de la fenêtre de mise en page. disposition visuelle.

如果不设置 initial-scale ，iOS设备会自动将 visual viewport 缩放到 布局视口一样大。

Vous vous souvenez de la largeur de la fenêtre de présentation par défaut ?

La relation entre les pixels logiques de l'écran, la fenêtre de présentation et la fenêtre visuelle

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

Définissez la largeur de la fenêtre de présentation sur la largeur de l'écran

<meta name="viewport" content="width=640">

Définissez la largeur de la fenêtre de présentation sur 640 px (pixels logiques, pas de pixels physiques)

<meta name="viewport" content="initial-scale=0.5">

Définissez la fenêtre d'affichage visuelle sur 2 fois la largeur de l'écran (la compréhension correcte est : 0,5 fois la fenêtre d'affichage visuelle est la largeur de l'écran, donc la largeur de la fenêtre d'affichage visuelle est deux fois la largeur de l'écran)

À l'heure actuelle, la largeur de la fenêtre de mise en page est également deux fois la largeur de l'écran, au lieu des 980 pixels par défaut

Résumé :

1、默认情况下 layout viewport 为 980px
2、width=x 设置布局视口，initial-scale=y 设置视觉视口
3、如果只设置 布局视口 和 视觉视口 中的一个，那么另一个也是同样的宽度
4、布局视口 的宽度始终大于等于 视觉视口

Par exemple, iPhone 5 ci-dessus

<meta name="viewport" content="width=600,initial-scale=0.5">

Alors, quelle est la largeur de la fenêtre d'affichage visuelle et de la fenêtre de mise en page, respectivement ?

Enfin, nous sommes enfin arrivés au familier

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

Vous savez tous ce que cela signifie, n'est-ce pas ?
Fenêtre du navigateur de la fenêtre de mise en page, définie sur la largeur de l'écran.
La fenêtre d'affichage visuelle est également définie sur la largeur de l'écran, sans mise à l'échelle, et le nombre de pixels est affiché aussi large que l'écran.
C'est ce qu'on appelle la fenêtre d'affichage parfaite.

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!