Comment utiliser l'attribut méta viewport de HTML

Cette fois, je vais vous montrer comment utiliser l'attribut méta viewport du HTML Quelles sont les précautions lors de l'utilisation de l'attribut méta viewport du HTML Ce qui suit est un cas pratique. un regard.

Qu'est-ce que Viewport

Les navigateurs mobiles placent la page dans une "fenêtre" virtuelle (port d'affichage). Habituellement, cette "fenêtre" virtuelle (port d'affichage) est plus large que l'écran, il n'est donc pas nécessaire de mettre chacun d'entre eux. la page qu'il contient. Les pages Web sont compressées dans une très petite fenêtre (ce qui briserait la mise en page des pages Web qui ne sont pas optimisées pour les navigateurs mobiles), et les utilisateurs peuvent effectuer un panoramique et un zoom pour voir différentes parties de la page Web. La version mobile du navigateur Safari a récemment introduit la balise méta viewport, qui permet aux développeurs Web de contrôler la taille et le zoom de la fenêtre. D'autres navigateurs mobiles la prennent également en charge.
Principes de base de Viewport
Une balise méta de fenêtre d'affichage couramment utilisée pour les pages optimisées pour les pages Web mobiles est à peu près la suivante :

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

largeur : contrôle la taille de la fenêtre d'affichage, une valeur qui peut être spécifié, si 600, ou une valeur spéciale telle que la largeur de l'appareil est la largeur de l'appareil (en pixels CSS lorsqu'il est mis à l'échelle à 100 %).

hauteur : Correspond à la largeur, en précisant la hauteur. initial-scale : Le taux de mise à l'échelle initial, c'est-à-dire le taux de mise à l'échelle lorsque la page est chargée pour la première fois.
échelle maximale : l'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer.
échelle minimale : l'échelle minimale à laquelle l'utilisateur est autorisé à zoomer.
Évolutif par l'utilisateur : si l'utilisateur peut zoomer manuellement
Quelques questions sur la fenêtre d'affichage
La fenêtre d'affichage n'est pas seulement un attribut unique sur iOS, il existe également des fenêtres d'affichage sur
Android et Winphone. Le problème qu'ils veulent résoudre est le même, c'est-à-dire ignorer la résolution réelle de l'appareil et réinitialiser directement la résolution entre la taille physique et le navigateur via dpi. Cette résolution n'a rien à voir avec la résolution de l'appareil. Par exemple, si vous prenez un iPhone 3 gs de 3,5 pouces-320*480, un iPhone 4 de 3,5 pouces-640*960 ou un iPad 2 de 9,7 pouces-1024*768, bien que les résolutions et les tailles physiques des appareils sont différents, vous pouvez définir la fenêtre d'affichage pour qu'ils aient la même résolution dans le navigateur. Par exemple, si votre site Web a une largeur de 800 px, vous pouvez définir la largeur de la fenêtre d'affichage sur 800 afin que votre site Web puisse être affiché sur tout l'écran sur ces trois appareils différents. Je crois que tout étudiant qui a un peu de connaissances en viewport devrait déjà connaître les connaissances ci-dessus. Ce n’est pas l’objet de ce que je veux dire aujourd’hui. Ce que je veux expliquer, ce sont quelques différences dans les performances de la fenêtre d'affichage sur iOS et Android.
En recherchant des connaissances sur la fenêtre d'affichage sur Internet, toutes les informations sont essentiellement les suivantes :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

La signification de ce code est de rendre la largeur de la fenêtre égale à la résolution réelle sur l'appareil physique. Les utilisateurs ne sont pas autorisés à zoomer. Toutes les applications Web grand public sont configurées de cette manière. Sa fonction est d'abandonner délibérément la fenêtre d'affichage et de ne pas mettre à l'échelle la page. De cette façon, le dpi doit être le même que la résolution réelle de l'appareil. Sans aucune mise à l'échelle, la page Web le sera. paraître plus haut. Les étudiants qui jouent à PS devraient tous savoir à quoi cela ressemblera lorsque vous redimensionnerez directement une image de 1000 * 1000

à 500 * 500 points, n'est-ce pas ? La distorsion de l’image ne peut être évitée. Mais l'application que je veux créer est tout le contraire. Elle doit utiliser la fenêtre d'affichage et le zoom. Quelle que soit la résolution réelle, quelle que soit la taille physique, je souhaite avoir une résolution unifiée dans le navigateur et ne pas permettre à l'utilisateur de zoomer. Les appareils que j'ai utilisés pour les tests incluent : l'iPhone 4, l'iPad 2, le g11 de HTC, le téléphone aquos (système Android) d'un fabricant inconnu, le pad Android d'ASUS et le winphone de Dell. Ensuite, j'ai rencontré les problèmes suivants en cours de route :
1. ) Si Si la fenêtre d'affichage n'est pas définie explicitement, la largeur par défaut est 980. Si la largeur de tous les éléments de la page est inférieure à 980, la largeur est de 980. Si la position la plus large de la page dépasse 980, alors la largeur est égale à la largeur maximale. Bref, la page entière peut être affichée de gauche à droite par défaut. Si la fenêtre d'affichage est définie, par exemple, user-scalable=no est simplement défini, comme 9e8e8b84bcea832bca90b002cb76dabf, alors la largeur sera toujours affichée à 980 sous iOS (c'est-à-dire que par défaut, il sera mis à l'échelle en dpi), mais il ne sera plus mis à l'échelle sous Android et Winphone. La résolution du navigateur est la même que la résolution réelle des paramètres.

2) Pour les appareils iOS, le réglage de la largeur peut prendre effet, mais pour Android, le réglage de la largeur ne prendra pas effet. Pour les appareils iOS, le rapport de mise à l'échelle, c'est-à-dire le dpi, est automatiquement calculé en fonction de la largeur que vous définissez et de la résolution réelle. Cependant, sous Android, la largeur que vous définissez n'est pas valide. Ce que vous pouvez définir est un champ spécial target-densitydpi. . Vous pouvez vous référer à target-densitydpi pour plus d'informations : http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. En d’autres termes, il existe trois variables : la largeur du navigateur, la largeur réelle de l’appareil et le dpi. Utilisons simplement une formule pour exprimer la relation entre elles (pas une relation réelle, juste pour une explication simple) Largeur réelle de l'appareil * dpi = largeur du navigateur ici, la largeur réelle de l'appareil est une valeur connue que nous ne pouvons pas exploiter. . , nous pouvons définir l'une des deux autres variables pour qu'elle affecte l'autre. Dans iOS, ce que nous pouvons modifier, c'est la largeur du navigateur, et le dpi est automatiquement généré. Dans Android, ce que nous pouvons modifier, c'est le dpi et la largeur du navigateur. est généré automatiquement. Pour Android, quelle que soit la manière dont nous définissons la largeur, cela n’affectera pas la largeur du navigateur.

ps : Laissez-moi parler d'un autre problème étrange ici : dans le g11 de HTC (je n'ai que ce seul téléphone HTC, et je n'ai pas testé les autres), si le dpi est défini sans définir explicitement la largeur, alors user -scalable=no ne prend pas effet, c'est-à-dire : 9a7a92fde93719ab207d2cf0a9d1855c, ce qui ne peut pas empêcher l'utilisateur de mettre à l'échelle l'écran. Nous devons définir explicitement la valeur de la largeur. Même si cette valeur n'a aucun impact sur la résolution du navigateur sous Android (elle aura toujours un impact sur iOS), nous devons quand même la définir, et cette valeur doit être supérieure à 320. S'il est inférieur ou égal à 320, user-scalable=no ne peut pas prendre effet. Ce problème ne se produit que sur le téléphone HTC G11, pas sur le téléphone Aquos. Être compatible avec Android est vraiment un casse-tête @_@ Je ne sais pas combien d'embûches il y aura dans le futur. Sur Winphone, le résultat est encore plus étrange : si je règle la largeur de la fenêtre sur une valeur supérieure à 480, user-scalable=no ne sera pas valide, mais si je définis une valeur inférieure à 480, user-scalable=no prendra effet. Mais quelle que soit la valeur que j'ai définie pour la largeur de la fenêtre d'affichage, elle n'a pas l'impact attendu sur la largeur réellement affichée par Winphone, et target-densitydpi n'a aucun impact non plus. Définissez la largeur. Si elle est inférieure à 480, l'écran sera mis à l'échelle, mais le rapport de mise à l'échelle est complètement différent de ce à quoi je m'attendais. Je ne sais pas s'il s'agit d'un problème Winphone ou d'un problème d'implémentation Dell.

3) Cet article doit être directement lié au précédent : lorsque l'appareil iOS est en écran horizontal ou vertical, il ajustera automatiquement le dpi. Quel que soit l'écran horizontal ou l'écran vertical, il peut assurer. que la largeur du navigateur est égale à la valeur définie dans la fenêtre, donc lorsque l'écran est en mode paysage ou portrait, la taille du contenu affiché sur la page sera automatiquement mise à l'échelle et modifiée. Lorsque le téléphone Android est en mode paysage ou portrait, le dpi ne changera pas, et lorsque l'écran est en mode paysage ou portrait, la page Web ne sera pas zoomée. Pour cette raison, iOS peut garantir que les pages d'écran horizontales et verticales ne généreront pas de barres de défilement et n'afficheront pas en plein écran, mais Android ne peut pas garantir cela. Si l'écran est plein horizontalement, il ne peut pas être en plein écran verticalement, et vice versa.

4) Pour les appareils ios, si la largeur d'affichage est définie et que la position la plus large de la page dépasse la largeur, la largeur n'est pas valide et sera toujours affichée selon la largeur la plus large (il n'y aura pas de barre de défilement ). Mais un problème très étrange surviendra à ce moment-là. Après avoir basculé plusieurs fois l'écran de votre téléphone entre paysage et portrait, vous constaterez que votre page est automatiquement agrandie et qu'une barre de défilement apparaît, mais en fait, la largeur agrandie n'est pas visible. la même chose que la largeur que vous définissez. Cela n'a pas d'importance. Pour éviter cela, vous devez définir une largeur supérieure ou égale à la partie la plus large de la page.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autres articles liés !

Lecture connexe :

Comment réaliser une taille de page Web adaptative mobile

Comment utiliser la ligne horizontale HR en HTML

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!