Adaptation de l'écran de la fenêtre dans le développement HTML5

Avec la popularité des téléphones mobiles haut de gamme (Andriod, Iphone, Ipod, WinPhone, etc.), le développement d'applications Internet mobiles a attiré de plus en plus d'attention. L'utilisation de HTML5 pour développer des applications mobiles est le meilleur choix. Cependant, chaque téléphone mobile a une résolution et une taille d'écran différentes. Comment pouvons-nous rendre l'application ou la taille de page que nous développons adaptée à différents téléphones mobiles haut de gamme ? Apprendre à utiliser la fenêtre d'affichage HTML5 peut vous aider à le faire...

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]
       "
   />

largeur

Contrôlez la taille de la fenêtre. 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 lorsque la mise à l'échelle est de 100 %).

hauteur

correspond à la largeur et précise 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 dp cible. 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.

1	<!-- html document -->
2	<meta name="viewport" content="target-densitydpi=device-dpi" />
3	<meta name="viewport" content="target-densitydpi=high-dpi" />
4	<meta name="viewport" content="target-densitydpi=medium-dpi" />
5	<meta name="viewport" content="target-densitydpi=low-dpi" />
6	<meta name="viewport" content="target-densitydpi=200" />

Pour empêcher le navigateur Android et WebView de redimensionner votre page en fonction de la densité de pixels des différents écrans, vous pouvez cibler la fenêtre d'affichage - densitédpi est défini 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

É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 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 :

(Définissez la largeur de l'écran sur la largeur de l'appareil et interdisez à l'utilisateur de régler manuellement le zoom)

5ca81241dcf6315bc5b7ab8f758a3c7c

(Réglez la densité de l'écran sur une mise à l'échelle automatique haute fréquence, moyenne fréquence et basse fréquence, interdisez à l'utilisateur d'ajuster manuellement la mise à l'échelle)

d6c28e08c58bbbd1a38930f0f9371a1f

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!