Description détaillée de la production de pages HTML meta viewport_HTML/Xhtml_Web

Qu'est-ce que Viewport

Les navigateurs mobiles placent la page dans une « fenêtre » virtuelle (viewport). Habituellement, cette « fenêtre » virtuelle (viewport) est plus large que l'écran, de sorte que chaque page Web n'a pas besoin d'être compressée. . Dans une très petite fenêtre (ce qui briserait la mise en page d'une page Web non optimisée pour les navigateurs mobiles), 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 une page optimisée pour les pages Web mobiles est à peu près la suivante :



largeur : fenêtre de contrôle La taille peut être spécifiée sous la forme d'une valeur, telle que 600, ou d'une valeur spéciale telle que la largeur de l'appareil, qui correspond à la largeur de l'appareil (en pixels CSS lorsqu'elle est mise à l'échelle à 100 %).
Hauteur : Correspondant à la largeur, précisez 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 pixels, vous pouvez définir la largeur de la fenêtre d'affichage sur 800 pour permettre à votre site Web de s'afficher entièrement à l'écran sur ces trois appareils différents.

Je crois que chaque étudiant qui a un peu de connaissances sur 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 :



La signification de ce code est de faire en sorte que la largeur du fenêtre d'affichage égale à celle du périphérique physique. Résolution réelle activée, ne permettant pas la mise à l'échelle de l'utilisateur. 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 fera. paraître plus haut. Les étudiants qui jouent à PS devraient tous savoir à quoi cela ressemblera lorsque vous redimensionnerez directement une image de 1 000 * 1 000 à 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 uniforme 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 la fenêtre d'affichage n'est pas définie explicitement, la largeur par défaut est de 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éfinie, comme
, alors la largeur sera toujours affichée à 980 sous iOS (c'est-à-dire qu'elle sera mise à l'échelle par dpi par défaut), mais elle ne sera pas affichée sous Android et Winphone. Après la mise à l'échelle, la résolution du navigateur est cohérente avec la résolution réelle des paramètres.
2）对于ios设备，设置width可以生效，但对于android，设置width并不会生效。ios设备，缩放的比率即dpi是通过你设置的 width和设置真实分辨率自动计算的，而android下你设置width无效，你能设置的是一个特殊的字段target-densitydpi，关于 target-densitydpi可以参考一下这篇文章：http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html。也就是说，有三个变量：浏览器width、设备真实width、dpi。 我们简单地用个公式来表达它们之间的关系吧（并非真实关系，简单说明用） 设备真实width * dpi = 浏览器width，这里的三个变量，设备真实width是个我们不能操作的已知值，另外两个变量我们可以设置一个来影响另一个，在ios中，我们能改的是 浏览器width，dpi自动生成，而在android中，我们能改的是dpi，浏览器width自动生成。对于android，无论我们如何设置 width，也不会对浏览器width产生影响。

ps：这里我另外再说一个奇怪的问题：在htc的g11里（htc的手机我只有这一个，别的没有测），如果设置了dpi而不显示地设置width， 则user-scalable=no不生效，即是说：，无法阻止用户缩放屏幕。我们需要显示地设置一下width值，仅管这个值对android下的浏览器分辨屏并不产生任何影响（对ios还是会 产生影响的），我们仍然要设置它，而且这个值一定要大于320，如果小于等于320，也无法使user-scalable=no生效。这个问题只在htc 的g11手机上出现，在aquos phone没有这个问题。兼容android真是件头痛的事 @_@，未来还不知道有多少坑呢。而在winphone上，结果就更奇怪了：我给viewport的width设一个大于480的值，user- scalable=no就失效了，而设一个小于480的值，user-scalable=no能生效。但无论我给viewport的width设多少值， 对winphone真正显示的width却并不产生我预期的影响，通过target-densitydpi也没有影响。设置width，如果小于480的 话，屏幕会缩放，但缩小的比例却和我预期完全不一样，我不知道它是按照什么规律缩放的。不知道这是winphone的问题，还是dell实现的问题。

3）这一条和上一条应该是直接相关的：ios设备在横竖屏时，会自动调整dpi，无论横屏还是竖屏，都能保证浏览器width等于viewport 中设置的值，所以横竖屏的时候，页面里显示的内容的大小是会自动缩放产生变化的。而android手机在横竖屏的时候，不会改变dpi，在横竖屏的时候， 网页不会产生缩放。也正因此，ios可以保证横竖屏页面都不会产生滚动条，满屏显示，而android却无法保证这一点，横着满屏则竖着无法满屏，反之亦 然。

4）对于ios设备，如果width显示定义了，而页面最宽的位置超过width的话，width无效，仍按最宽的宽度来显示（不会有滚动条）。但 此时会出现一个很奇怪的问题，当你将手机横竖屏切换几次之后，会发现你的页面自动放大了，出现了滚动条，但其实放大后的宽度其实和你设的width也并没 有关系。为了防止这种情况出现，你需要将width的宽度设置得比页面最宽的地方更大，或者相同。