Utilisation de la fenêtre dans les compétences du didacticiel HTML5 development_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 à y parvenir... Introduction à la syntaxe de la fenêtre d'affichage :

Copier le code Le code est le suivant : content=" hauteur = [pixel_value | hauteur de l'appareil] , largeur = [valeur_pixel | largeur de l'appareil ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value device- dpi | élevé -dpi | moyen-dpi | faible-dpi] " /> largeur Contrôlez 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 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 natif 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. moyen-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. – Spécifiez une valeur dpi spécifique comme dpi cible. Cette valeur doit être comprise entre 70 et 400.

Copier le code Le code est le suivant : 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 évolutif 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)

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