Qu'est-ce que la fenêtre
Les navigateurs mobiles placent la page dans une fenêtre virtuelle (fenêtre). Habituellement, la fenêtre virtuelle (fenêtre) est plus large que l'écran, de sorte que chaque page Web n'a pas à serrer chaque page Web dans une très petite fenêtre (cela détruira la disposition de la page Web qui n'est pas optimisée pour les navigateurs mobiles). Les utilisateurs peuvent voir différentes parties de la page Web via le panoramique et le zoom. La version mobile de Safari Browser a récemment introduit la télévision Meta, qui permet aux développeurs Web de contrôler la taille et le zoom de la fenêtre, et d'autres navigateurs mobiles le prennent également en charge.
Bases de la fenêtre
La balise Meta Meta d'une page couramment utilisée optimisée 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, qui peut être spécifiée si 600, ou une valeur spéciale, telle que la largeur du dispositif, est la largeur de l'appareil (unités des pixels du CSS lorsqu'elle est mise à 100%.
hauteur: correspond à la largeur, spécifiez la hauteur.
Échelle initiale: mise à l'échelle initiale, c'est-à-dire le rapport de mise à l'échelle lorsque la page est chargée pour la première fois.
Échelle maximale: l'échelle maximale qui permet à l'utilisateur de se mettre à l'échelle.
Échelle minimale: l'échelle minimale qui permet à l'utilisateur de se mettre à l'échelle.
Échec de l'utilisateur: l'utilisateur peut-il évoluer manuellement
Quelques questions sur la fenêtre
La fenêtre n'est pas seulement un attribut unique sur iOS, mais aussi une fenêtre 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 directement à travers le DPI, réinitialisant la résolution entre la taille physique et le navigateur, ce qui n'a rien à voir avec la résolution de l'appareil. Par exemple, vous pouvez obtenir un iPhone3 GS avec 3,5 pouces-320 * 480, iPhone4 avec 3,5 pouces-640 * 960, iPhone4 avec 9,7 pouces-1024 * 768 et iPad2 avec différentes résolutions et tailles physiques, vous pouvez définir le sport pour les faire avoir la même résolution dans le reprocheur. Par exemple, votre site Web a une largeur de 800px, vous pouvez définir la largeur = 800 de la vision pour faire afficher votre site Web sur votre site Web sur ces trois appareils différents en plein écran.
Je crois que chaque élève qui a un peu de compréhension de la fenêtre de la fenêtre aurait déjà dû comprendre les connaissances ci-dessus. Ce n'est pas le point dont je veux parler aujourd'hui. Ce que je veux illustrer, ce sont quelques-unes des différences de performances de la fenêtre sur iOS et Android.
Lors de la recherche des connaissances en ligne sur la fenêtre, il s'agit essentiellement de toutes les informations suivantes:
<meta name = Viewport Content = width = Device-Width, Initial-Scale = 1,0, Maximum-Scale = 1,0, minimum-échelle = 1,0, user-scalable = no />
Ce code signifie que la largeur de la fenêtre est égale à la résolution réelle sur le périphérique physique et ne permet pas à l'utilisateur d'évoluer. C'est ainsi que les applications Web grand public de Yidu sont définies. Sa fonction est d'abandonner délibérément la fenêtre et de ne pas évoluer 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 apparaîtra plus élevée et plus délicate. Les étudiants qui jouent au PS devraient savoir ce que cela deviendra lorsque vous zoomerez une image de 1000 * 1000 directement à 500 * 500 points, non? La distorsion de l'image ne doit pas être échappée.
Mais l'application que je veux faire est le contraire et il doit utiliser la fenêtre et le zoom. Quelle que soit la résolution réelle ou la taille physique, j'espère qu'il y aura une résolution unifiée dans le navigateur et que l'utilisateur ne sera pas autorisé à zoomer. Les appareils que j'ai utilisés pour tester sont: iPhone4, iPad2, HTC G11, Aquos Phone (Android System), ASUS Android Pad, Dell Winphone et moi avons rencontré les problèmes suivants en cours de route:
1) Si la fenêtre est définie sans affichage, la largeur par défaut est 980. Si tous les éléments de la page sont inférieurs à 980, la largeur est 980. Si la largeur de la page dépasse 980, alors la largeur est égale à la largeur maximale. En bref, la page entière peut être affichée de gauche à droite par défaut. Si vous définissez la fenêtre, par exemple, définissez simplement user-échecable = no, par exemple <meta name = Viewport Content = User-Scalable = no />, alors la largeur sous iOS sera toujours affichée à 980 (c'est-à-dire qu'elle sera mise à l'échelle par DPI par défaut), mais elle ne sera plus mise à l'échelle sous Android et Winphone, et la résolution du navigateur et la résolution réelle ne seront pas la résolution de même.
2) Pour les appareils iOS, la largeur du réglage peut prendre effet, mais pour Android, la largeur du réglage ne prendra pas effet. Les appareils iOS, le rapport de mise à l'échelle, DPI, sont automatiquement calculés à travers la largeur que vous définissez et la résolution réelle. Cependant, dans Android, vous définissez la largeur n'est pas valide. Ce que vous pouvez définir est un champ spécial de densityDPI de champ spécial. Pour Target-DensityDpi, vous pouvez vous référer à cet article: http://hi.baidu.com/j_fo/blog/item /748361279ebccd18908f9d7d.html. En d'autres termes, il existe trois variables: largeur du navigateur, largeur réelle de l'appareil et DPI. Utilisons simplement une formule pour exprimer la relation entre eux (pas de vraies relations, utilisons-la simplement pour une brève explication) Largeur réelle de l'appareil * dpi = largeur du navigateur, ici les trois variables, la largeur réelle de l'appareil est une valeur connue que nous ne pouvons pas fonctionner et nous pouvons définir l'une des autres variables pour affecter l'autre. Dans iOS, ce que nous pouvons changer, c'est la largeur du navigateur, DPI est automatiquement généré et dans Android, ce que nous pouvons changer est DPI et la largeur du navigateur est générée automatiquement. Pour Android, peu importe comment nous définissons la largeur, cela n'aura pas d'impact sur la largeur du navigateur.
PS: Ici, je parlerai d'un autre problème étrange: dans le G11 de HTC (je n'ai que celui-ci pour le téléphone de HTC, et aucun autre test), si DPI est défini sans afficher la largeur, User-Scalable = no ne prend pas effet, c'est-à-dire, <meta name = Viewport Content = Target-DensityDpi = 300, user-échec = no />, il ne peut pas empêcher les utilisateurs de zoom de zoom de zoom dans le écran. Nous devons définir la valeur de largeur affichable. Bien que cette valeur n'ait aucun impact sur la résolution d'écran du navigateur sous Android (elle aura toujours un impact sur iOS), nous devons toujours le définir, et cette valeur doit être supérieure à 320. S'il est inférieur ou égal à 320, l'utilisateur-échelle = Non ne peut pas être efficace. Ce problème n'apparaît que sur le téléphone G11 de HTC, et il n'y a aucun problème sur le téléphone Aquos. Compatible avec Android est vraiment un mal de tête @ _ @. Je ne sais pas combien de pièges seront à l'avenir. Sur les winphone, le résultat est encore plus étrange: je définis une valeur supérieure à 480 pour la largeur de la fenêtre, et l'utilisateur-échec = non échouera. Si une valeur inférieure à 480, l'utilisateur-échec = non prendra effet. Mais peu importe la valeur que j'ai défini la largeur de la fenêtre, elle n'a pas l'effet sur la largeur réelle affichée par Winphone, ni l'effet via Target-DensityDPI. Définir la largeur, s'il est inférieur à 480, l'écran zoomer, mais l'échelle de réduction est complètement différente de ce à quoi je m'attendais. Je ne sais pas quelle est la règle qu'elle est zoom.
3) Cet article doit être directement lié à l'article précédent: Lorsque le périphérique iOS est horizontal et vertical, il ajustera automatiquement le DPI. Qu'il soit horizontal ou vertical, il peut garantir que la largeur du navigateur est égale à la valeur définie dans la fenêtre. Par conséquent, lorsque les écrans horizontaux et verticaux sont des écrans horizontaux et verticaux, la taille du contenu affiché sur la page évoluera automatiquement et changera. Lorsque les téléphones Android sont des écrans horizontaux et verticaux, le DPI ne sera pas modifié et lorsque les écrans horizontaux et verticaux ne seront pas zoomés. Pour cette raison, iOS peut s'assurer qu'aucune barre de défilement n'est générée sur les pages horizontales et verticales, et le plein écran s'affiche, mais Android ne peut le garantir. Si les écrans horizontaux et verticaux ne sont pas autorisés à être pleins, et vice versa.
4) Pour les appareils iOS, si l'affichage de largeur est défini 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 à la largeur la plus large (il n'y aura pas de barre de défilement). Mais un problème très étrange se produira pour le moment. Après avoir changé plusieurs fois l'écran horizontal et vertical de votre téléphone, vous constaterez que votre page a automatiquement agrandi et qu'une barre de défilement apparaît, mais en fait, la largeur élargie n'a rien à voir avec la largeur que vous définissez. Pour éviter que cela ne se produise, vous devez définir la largeur de la largeur pour être plus grand que la partie la plus large de la page, ou la même.