Commentaire: Avec la popularité des téléphones mobiles haut de gamme (Andriod, iPhone, iPod, winphone, etc.), le développement d'applications Internet mobile reçoit également de plus en plus d'attention des gens. L'utilisation de HTML5 pour développer des applications mobiles est le meilleur choix. Cependant, chaque téléphone a différentes résolutions et tailles d'écran. Comment la taille de l'application ou de la page que nous avons développée peut être utilisée pour une utilisation dans divers téléphones haut de gamme? Apprenez la fenêtre HTML5
Introduction de la syntaxe de la fenêtre:
<! - Document HTML ->
<méta-nom = vue
contenu =
height = [pixel_value | Appareil-hauteur],
largeur = [pixel_value | Appareil-largeur],
initial-scale = float_value,
minimum-scale = float_value,
maximum-scale = float_value,
utilisateur-échec = [Oui | Non] ,
Target-DensityDpi = [dpi_value | Device-dpi | high-dpi | moyen-DPI | bas-dpi]
/>
Explication des paramètres:
largeur
— - contrôle la taille de la fenêtre, qui peut être spécifiée comme une valeur ou une valeur spéciale, telle que la largeur du dispositif, qui est la largeur de l'appareil (unités des pixels du CSS lorsqu'elle est mise à 100%.
hauteur
—— Correspondation à la largeur, spécifiant la hauteur.
cible-densitydpi
—— La densité d'un pixel d'écran est déterminée par la résolution de l'écran et est généralement définie comme le nombre de points par pouce (dpi). Android prend en charge la densité de pixels à trois écrans: densité basse pixel, densité de pixels moyens et de densité élevée de pixels. Un écran de densité à faible pixel a moins de pixels par pouce, tandis qu'un écran de densité de pixels élevé a plus de pixels par pouce. Android Browser et WebView ont une densité de pixels moyenne par défaut.
Vous trouverez ci-dessous la plage de valeur de l'attribut cible-densityDPI
Device-DPI: utilisez le DPI d'origine de l'appareil comme DP cible. Le zoom par défaut ne se produit pas.
High-DPI: Utilisez HDPI comme DPI cible. Les dispositifs de densité de pixels moyens et faibles sont réduits en conséquence.
moyen-DPI: utilisez MDPI comme DPI cible. Le dispositif de densité de pixels élevé est agrandi en conséquence et le dispositif de densité de pixels est réduit en conséquence. Il s'agit de la densité cible par défaut.
LOW-DPI: Utilisez MDPI comme DPI cible. Les dispositifs de densité de pixels moyens et élevés sont amplifiés en conséquence.
<value>: Spécifiez une valeur DPI spécifique en tant que DPI cible. La plage de cette valeur doit être comprise entre 70 et 400.
<! - Document HTML ->
<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 vos pages en fonction de la densité de pixels de différents écrans, vous pouvez définir le Target-DensityDPI de la fenêtre sur Device-DPI. Lorsque vous faites cela, la page ne s'adaptera pas. Au lieu de cela, la page s'affiche 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 pour correspondre à la largeur de l'appareil afin que votre page puisse s'adapter à l'écran.
échelle initiale
—— Échelle initiale. C'est-à-dire le niveau de zoom initial de la page. Il s'agit d'une valeur de point flottante, 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 s'affiche avec une résolution 1: 1 de la densité cible. Si vous le définissez sur 2.0, cette page sera agrandie à 2x.
à l'échelle maximale
— - Zoom maximal. C'est le degré de mise à l'échelle maximum autorisé. Il s'agit également d'une valeur de point flottante qui indique le multiplicateur maximal de la taille de la page par rapport à la taille de l'écran. Par exemple, si vous définissez cette valeur sur 2.0, cette page peut être agrandie jusqu'à 2 fois par rapport à la taille cible.
à l'échelle des utilisateurs
— - L'utilisateur ajuste le zoom. Autrement dit, si l'utilisateur peut modifier le niveau de zoom de page. S'il est réglé sur oui, l'utilisateur lui permettra de le modifier, sinon c'est non. La valeur par défaut est oui. Si vous le définissez sur non, à l'échelle minimale et à l'échelle maximale sera ignorée car la mise à l'échelle n'est tout simplement pas possible.
Toutes les valeurs de mise à l'échelle doivent être dans la plage de 0,01 à 10.
Exemple: 1. Définissez la largeur de l'écran sur la largeur de l'appareil, interdisant aux utilisateurs de régler manuellement le zoom
<meta name = Viewport Content = width = Device-Width, User-Scalable = no />
2. Réglez la densité d'écran sur la mise à l'échelle automatique de la haute fréquence, de la fréquence moyenne et de basse fréquence, et interdit aux utilisateurs de régler manuellement la mise à l'échelle
<Meta name = Viewport Content = Width = Device-Width, Target-DensityDpi = High-DPI, Initial-Scale = 1,0, minimum-échelle = 1,0, maximum-échelle = 1,0, utilisateur-échecable = no />