Introduction aux paramètres de Viewport en HTML5 et comment l'utiliser

Internet se développe de plus en plus vite et diverses technologies émergent les unes après les autres. Les tailles d'affichage et les résolutions des différents appareils sont différentes. C'est également un problème avec lequel notre personnel front-end est actuellement aux prises : comment développer. une fois et soyez convivial sur différentes interfaces. Montrez-le !

Heureusement, Viewport est apparu en HTML5 ! L’émergence de Viewport permet aux applications ou pages que nous développons de s’afficher de manière uniforme et conviviale sur des appareils de tailles différentes !

Introduction à la syntaxe de la fenêtre d'affichage :

<!– html document –>
 <meta name=”viewport”
content=”
 height = [pixel_value | device-height] ,
 width = [pixel_value | device-width ] ,
 initial-scale = float_value ,
 minimum-scale = float_value ,
 maximum-scale = float_value ,
 user-scalable = [yes | no] ,
 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
”
/>

Explication des paramètres :

largeur - Contrôle la taille de la fenêtre d'affichage. Vous pouvez spécifier une valeur ou une valeur spéciale. Par exemple, la largeur de l'appareil est la largeur de l'appareil (l'unité est les pixels CSS lors de la mise à l'échelle à 100 %).

hauteur - Correspondant à la largeur, spécifiez la hauteur

target-densitydpi - La densité de pixels d'un écran est déterminée par la résolution de l'écran, généralement définie comme le nombre de points par pouce (dpi) . Android prend en charge trois densités de pixels d'écran : faible densité de pixels, densité de pixels moyenne et densité de pixels élevée. Un écran à faible densité de pixels a moins de pixels par pouce, tandis qu'un écran à haute densité de pixels a plus de pixels par pouce. Les écrans par défaut du navigateur Android et de WebView ont une densité de pixels moyenne.

Ce qui suit est la plage de valeurs de l'attribut target-densitydpi

device-dpi : utilisez le dpi d'origine de l'appareil comme cible dp. La mise à l'échelle par défaut ne se produit pas.

high-dpi : utilisez hdpi comme dpi cible. Les appareils à densité de pixels moyenne et faible sont réduits en conséquence.

medium-dpi : utilisez mdpi comme dpi cible. Les appareils avec une densité de pixels élevée augmentent en conséquence et les appareils avec une densité de pixels diminuent en conséquence. Il s'agit de la densité cible par défaut.

low-dpi : utilisez mdpi comme dpi cible. Les appareils à densité de pixels moyenne et élevée évoluent en conséquence.

8487820b627113dd990f63dd2ef215f3 : spécifiez une valeur dpi spécifique comme dpi cible. Cette valeur doit être comprise entre 70 et 400.

<!– html document –>
 <meta name=”viewport” content=”target-densitydpi=device-dpi” />
 <meta name=”viewport” content=”target-densitydpi=high-dpi” />
 <meta name=”viewport” content=”target-densitydpi=medium-dpi” />
 <meta name=”viewport” content=”target-densitydpi=low-dpi” />
 <meta name=”viewport” content=”target-densitydpi=200″ />

Pour empêcher le navigateur Android et WebView de mettre à l'échelle votre page en fonction de la densité de pixels des différents écrans, vous pouvez définir la densité cible de la fenêtre d'affichage sur périphérique-dpi. Lorsque vous faites cela, la page ne sera pas mise à l'échelle. Au lieu de cela, la page est affichée en fonction de la densité de pixels de l'écran actuel. Dans ce cas, vous devez également définir la largeur de la fenêtre d'affichage pour qu'elle corresponde à la largeur de l'appareil afin que votre page puisse tenir sur l'écran.

échelle initiale - mise à l'échelle initiale. C'est-à-dire le niveau de zoom initial de la page. Il s'agit d'une valeur à virgule flottante qui est un multiplicateur de la taille de la page. Par exemple, si vous définissez la mise à l'échelle initiale sur « 1,0 », la page Web sera affichée à 1:1 de la résolution de densité cible lors de son affichage. Si vous le définissez sur "2.0", la page sera agrandie 2 fois.

échelle maximale - Mise à l'échelle maximale. C'est-à-dire le degré maximum de mise à l'échelle autorisé. Il s'agit également d'une valeur à virgule flottante indiquant le multiplicateur maximum de la taille de la page par rapport à la taille de l'écran. Par exemple, si vous définissez cette valeur sur « 2,0 », alors la page peut être agrandie jusqu'à 2 fois par rapport à la taille cible.

évolutif par l'utilisateur - Mise à l'échelle réglable par l'utilisateur. Autrement dit, si l'utilisateur peut modifier le niveau de zoom de la page. Si la valeur est oui, l'utilisateur est autorisé à le modifier, sinon c'est non. La valeur par défaut est oui. Si vous le définissez sur non, les échelles minimale et maximale seront ignorées, car la mise à l'échelle n'est pas du tout possible.

Toutes les valeurs de mise à l'échelle doivent être comprises entre 0,01 et 10.

Exemple : 1. Réglez la largeur de l'écran sur la largeur de l'appareil et interdisez à l'utilisateur de régler manuellement le zoom

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

Exemple : 2. Réglez la densité de l'écran sur haute fréquence, moyenne fréquence et basse fréquence et interdire à l'utilisateur de mettre à l'échelle automatiquement Ajuster manuellement le zoom

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0

【Recommandations associées】

1 Recommandation spéciale : "outils de programmation php Téléchargez la version V0.1 de "Box"

2. Exemple de code sur les problèmes de compatibilité des fenêtres

3 . Sujet spécial Viewport : compréhension approfondie du CSS Responsive Web Design - viewport

4 Partagez l'attribut viewport pour résoudre le problème de réinitialisation de la police lors du passage de la verticale. écran vers écran horizontal 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!