Commentaire: 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?
Avec la popularité des téléphones mobiles haut de gamme (Andriod, iPhone, iPod, winphone, etc.), le développement de l'application 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? L'apprentissage de l'utilisation de la fenêtre HTML5 peut vous aider à le faire ...
Introduction de la syntaxe de la fenêtre:
<! - Document HTML ->
<méta-méta
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]
"
/>
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
Correspondant à la largeur, spécifiez la hauteur.
cible-densitydpi
La densité de pixels d'un é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. Cette valeur doit aller de 70 à 400.
<! - Document HTML ->
<meta content = "cible-densitydpi = device-dpi" />
<meta content = "cible-densitydpi = high-dpi" />
<meta content = "cible-densitydpi = moyen-dpi" />
<meta content = "cible-densitydpi = low-dpi" />
<meta content = "cible-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 maximum. 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:
(Réglez la largeur de l'écran sur la largeur de l'appareil et interdisez aux utilisateurs de régler manuellement le zoom)
<meta name = Viewport Content = width = Device-Width, User-Scalable = no />
(Définissez la densité de l'écran pour zoomer automatiquement en fréquence, fréquence moyenne et basse fréquence, et interdire aux utilisateurs de régler manuellement le zoom)
<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 />