Was ist Ansichtsfenster
Mobile Browser platzieren die Seite in einem virtuellen Fenster (Ansichtsfenster). Normalerweise ist das virtuelle Fenster (Ansichtsfenster) breiter als der Bildschirm, sodass jede Webseite jede Webseite nicht in ein sehr kleines Fenster drücken muss (dies zerstört das Layout der Webseite, das nicht für mobile Browser optimiert ist). Benutzer können verschiedene Teile der Webseite durch Schwenk und Zoomen sehen. Die mobile Version von Safari Browser hat kürzlich das Meta -Tag des Ansichtsfenfers eingeführt, mit dem Webentwickler die Größe und das Zoom des Ansichtsfensters steuern können, und andere mobile Browser unterstützen sie im Grunde genommen.
Ansichtsfenster -Grundlagen
Das Ansichtsfenster -Meta -Tag einer häufig verwendeten Seite, die für mobile Webseiten optimiert ist, ist ungefähr wie folgt:
<meta name = viewport content = width = Gerätebreite, initiale scale = 1, maximal scale = 1 ″>
Breite: steuert die Größe des Ansichtsfensters, der angegeben werden kann, wenn 600 oder ein besonderer Wert, wie z. B. die Gerätebraute, die Breite des Geräts ist (Einheiten der Pixel des CSS, wenn sie auf 100%skaliert werden.
Höhe: Entspricht der Breite, geben Sie die Höhe an.
Initial-Scale: Erstskalierung, dh das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird.
Maximales Maßstab: Die maximale Skala, die es dem Benutzer ermöglicht, zu skalieren.
Mindestmaßstab: Die minimale Skala, mit der der Benutzer skaliert werden kann.
Benutzerfreundlich: Kann der Benutzer manuell skalieren
Einige Fragen zum Ansichtsfenster
ViewPort ist nicht nur ein einzigartiges Attribut für iOS, sondern auch ein Ansichtsfenster zu Android und WinPhone. Das Problem, das sie lösen möchten, ist das gleiche, das heißt, die tatsächliche Auflösung des Geräts und direkt durch die DPI zu ignorieren, wobei die Auflösung zwischen der physischen Größe und dem Browser zurückgesetzt wird, was nichts mit der Auflösung des Geräts zu tun hat. Beispielsweise können Sie ein iPhone3 GS mit 3,5-Zoll-320 * 480, iPhone4 mit 3,5-Zoll-640 * 960, iPhone4 mit 9,7-Zoll-1024 * 768 und iPad2 mit unterschiedlichen Auflösungen und physischen Größen erhalten. Beispielsweise ist Ihre Website 800px breit. Sie können die Width = 800 des Ansichtsfensatzes festlegen, damit Ihre Website Ihre Website auf diesen drei verschiedenen Geräten nur ganz auf dem gesamten Bildschirm anzeigt.
Ich glaube, dass jeder Schüler, der ein wenig Verständnis für das Ansichtsfenster hat, das oben genannte Wissen bereits verstanden hat. Dies ist nicht der Punkt, über den ich heute sprechen möchte. Was ich veranschaulichen möchte, sind einige der Unterschiede in der Aussichtsfenster -Leistung auf iOS und Android.
Bei der Suche nach dem Online -Wissen über das Ansichtsfenster sind es im Grunde alle folgenden Informationen:
<meta name = Ansichtsfensterinhalt = Breite = Gerätebreite, initiale scale = 1,0, maximal scale = 1,0, minimal scale = 1,0, user-scalable = no />
Dieser Code bedeutet, dass die Breite des Ansichtsfenfers der tatsächlichen Auflösung auf dem physischen Gerät entspricht und dem Benutzer nicht zulässt. So werden die Mainstream -Web -Apps in Yidu festgelegt. Seine Funktion besteht darin, das Ansichtsfenster absichtlich aufzugeben und die Seite nicht zu skalieren. Auf diese Weise muss der DPI die gleiche wie die reale Auflösung auf dem Gerät sein. Ohne Skalierung erscheint die Webseite höher und empfindlicher. Schüler, die PS spielen, sollten wissen, was es werden wird, wenn Sie ein Bild von 1000 * 1000 direkt bis 500 * 500 Punkte zoomen, oder? Die Verzerrung des Bildes darf nicht entkommen werden.
Aber die Anwendung, die ich tun möchte, ist das Gegenteil und muss Ansichtsfenster und Zoom verwenden. Unabhängig davon, was die wirkliche Lösung ist oder wie die physische Größe ist, ich hoffe, dass es im Browser eine einheitliche Lösung geben wird und dass der Benutzer nicht zoomen darf. Die Geräte, die ich zum Testen verwendet habe, sind: iPhone4, iPad2, HTC G11, Aquos -Telefon (Android -System), Asus Android Pad, Dell Winphone und ich auf den folgenden Problemen auf die folgenden Probleme:
1) Wenn das Ansichtsfenster ohne Anzeige eingestellt ist, beträgt die Standardbreite 980. Wenn alle Elemente der Seite weniger als 980 sind, beträgt die Breite 980. Wenn die Breite der Seite 980 überschreitet, ist die Breite gleich der maximalen Breite. Kurz gesagt, die gesamte Seite kann standardmäßig von links nach rechts angezeigt werden. Wenn Sie das Ansichtsfenster beispielsweise einstellen, werden Sie nur von Benutzer scalable = no festgelegt.
2) Für iOS -Geräte kann die Einstellung der Breite wirksam werden, aber für Android wird die Einstellung der Breite nicht wirksam. Das Skalierungsverhältnis von DPI wird automatisch durch die von Ihnen festgelegte Breite und die reale Auflösung berechnet, die Sie festgelegt haben. In Android ist die Breite jedoch ungültig. Was Sie einstellen können, ist eine spezielle Feldzieldichtedichtedichte, dh es gibt drei Variablen: Browserbreite, Geräterealbreite und DPI. Lassen Sie uns einfach eine Formel verwenden, um die Beziehung zwischen ihnen auszudrücken (nicht reale Beziehungen, sie einfach für eine kurze Erklärung) Gerät reales Breite * dpi = Browserbreite, hier die drei Variablen, das reale Gerät ist ein bekannter Wert, den wir nicht bedienen können, und wir können eine der anderen Variablen so einstellen, dass sie die andere betreffen. In iOS können wir die Browserbreite ändern, DPI wird automatisch generiert und in Android können wir dpi ändern und die Browserbreite wird automatisch generiert. Für Android, egal wie wir die Breite setzen, wird es keinen Einfluss auf die Browserbreite haben.
PS: Hier werde ich über ein anderes seltsames Problem sprechen: In HTCs G11 (ich habe nur dieses für das Telefon von HTC und keine anderen Tests), wenn DPI ohne Breite eingestellt wird, nutzer-skalierbar = Nein, wirkt sich nicht aus. Wir müssen den Breitenwert ausstellen. Obwohl dieser Wert unter Android keine Auswirkungen auf die Browser-Bildschirmauflösung hat (er wird sich weiterhin auf iOS auswirken), müssen wir ihn weiterhin festlegen, und dieser Wert muss größer als 320 sein. Wenn er weniger oder gleich 320 ist, kann es zu einer Wirksamkeit von Benutzern sind. Dieses Problem erscheint nur auf dem G11 -Telefon von HTC, und es gibt kein solches Problem auf dem Aquos -Telefon. Kompatibel mit Android ist wirklich Kopfschmerzen @_ @. Ich weiß nicht, wie viele Fallstricke in Zukunft sein werden. Bei WinPhone ist das Ergebnis noch seltsamer: Ich habe einen Wert von mehr als 480 für die Breite des Ansichtsfensters festgelegt, und Benutzer skalierbar = nein wird fehlschlagen. Wenn ein Wert von weniger als 480, wird von Benutzer skalierbar = no wirksam. Unabhängig davon, wie viel Wert ich die Ansichtsfensterbreite festgelegt habe, wirkt es sich nicht auf die reale Breite aus, die von WinPhone angezeigt wird, und es hat auch nicht den Effekt über Target-DensityDPI. Setzen Sie die Breite, wenn es weniger als 480 ist, wird der Bildschirm vergrößert, aber der Skala der Reduktion unterscheidet sich völlig von dem, was ich erwartet habe. Ich weiß nicht, wie es die Regel ist, in der es gezoomt wird. Ich weiß nicht, ob dies ein Problem mit Winphone oder einem Problem mit der Dell -Implementierung ist.
3) Dieser Artikel sollte in direktem Zusammenhang mit dem vorherigen Artikel stehen: Wenn das iOS -Gerät horizontal und vertikal ist, passt er den DPI automatisch an. Unabhängig davon, ob es horizontal oder vertikal ist, kann es sicherstellen, dass die Browserbreite dem im Ansichtsfenster festgelegten Wert entspricht. Wenn die horizontalen und vertikalen Bildschirme horizontale und vertikale Bildschirme sind, skaliert und ändert sich die Größe des auf der Seite angezeigten Inhalts automatisch. Wenn Android -Telefone horizontale und vertikale Bildschirme sind, wird der DPI nicht geändert, und wenn horizontale und vertikale Bildschirme, wird die Webseite nicht vergrößert. Aus diesem Grund kann iOS sicherstellen, dass auf den horizontalen und vertikalen Seiten kein Bildlaufleisten erzeugt und der Vollbildmodus angezeigt wird, Android kann dies jedoch nicht garantieren. Wenn die horizontalen und vertikalen Bildschirme nicht voll sein dürfen und umgekehrt.
4) Für iOS -Geräte, wenn die Breite definiert ist und die breiteste Position der Seite die Breite überschreitet, ist die Breite ungültig und wird weiterhin in der breitesten Breite angezeigt (es gibt keine Scroll -Balken). Aber zu diesem Zeitpunkt wird ein sehr seltsames Problem auftreten. Nachdem Sie den horizontalen und vertikalen Bildschirm Ihres Telefons mehrmals gewechselt haben, werden Sie feststellen, dass Ihre Seite automatisch vergrößert ist und eine Bildlaufleiste angezeigt wird, aber tatsächlich hat die vergrößerte Breite nichts mit der von Ihnen festgelegten Breite zu tun. Um dies zu verhindern, müssen Sie die Breite der Breite so einstellen, dass sie größer ist als der breiteste Teil der Seite oder dasselbe.