Beschreibung des Meta-Viewport-Attributs bei der Produktion von HTML-Webseiten_HTML/Xhtml_Webseiten

HTML-Meta-Ansichtsfenster-Attributbeschreibung

Was ist Viewport?

Mobile Browser platzieren die Seite in einem virtuellen „Fenster“ (Ansichtsfenster). Normalerweise ist dieses virtuelle „Fenster“ (Ansichtsfenster) breiter als der Bildschirm, sodass nicht jede Webseite in ein kleines Fenster gequetscht werden muss. Dadurch wird das Layout von Webseiten beschädigt, die nicht für mobile Browser optimiert sind.) Benutzer können schwenken und zoomen, um verschiedene Teile der Webseite anzuzeigen. Die mobile Version des Safari-Browsers hat kürzlich das Viewport-Meta-Tag eingeführt, mit dem Webentwickler die Größe und den Zoom des Ansichtsfensters steuern können. Auch andere mobile Browser unterstützen dies grundsätzlich.

Grundlagen des Ansichtsfensters

Ein häufig verwendetes Viewport-Meta-Tag für eine für mobile Webseiten optimierte Seite lautet ungefähr wie folgt:

width: Steuert die Größe des Ansichtsfensters. Sie können einen Wert angeben, z. B. 600, oder einen speziellen Wert, z. B. „device-width“, der die Breite des Geräts angibt (Einheit sind CSS-Pixel, wenn auf 100 % gezoomt wird). ).
Höhe: Geben Sie entsprechend der Breite die Höhe an.
Anfangsskalierung: Das anfängliche Skalierungsverhältnis, also das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird.
maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf.
Minimalmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf.
Benutzerskalierbar: ob der Benutzer manuell skalieren kann

Einige Fragen zum Ansichtsfenster

Viewport ist nicht nur ein einzigartiges Attribut auf iOS, es gibt auch Viewports auf Android und Winphone. Das Problem, das sie lösen möchten, ist das gleiche, nämlich das Ignorieren der tatsächlichen Auflösung des Geräts und das direkte Zurücksetzen der Auflösung zwischen der physischen Größe und dem Browser über dpi. Diese Auflösung hat nichts mit der Auflösung des Geräts zu tun. Wenn Sie beispielsweise ein 3,5-Zoll-320*480 iPhone 3 gs, ein 3,5-Zoll-640*960 iPhone 4 oder ein 9,7-Zoll-1024*768 iPad 2 nehmen, obwohl die Auflösungen und physischen Größen der Geräte unterschiedlich sind, können Sie das festlegen. Das Ansichtsfenster sorgt dafür, dass sie im Browser die gleiche Auflösung haben. Wenn Ihre Website beispielsweise 800 Pixel breit ist, können Sie die Breite des Ansichtsfensters auf 800 Pixel festlegen, damit Ihre Website auf diesen drei verschiedenen Geräten vollständig auf dem Bildschirm angezeigt werden kann.

Ich glaube, dass jeder Schüler, der ein wenig über Viewport-Kenntnisse verfügt, die oben genannten Kenntnisse bereits kennen sollte. Dies ist nicht der Schwerpunkt dessen, was ich heute sagen möchte. Was ich erklären möchte, sind einige Unterschiede in der Leistung von Viewport auf iOS und Android.

Bei der Suche nach Wissen über Viewport im Internet lauten im Grunde alle Informationen wie folgt:

Die Bedeutung dieses Codes besteht darin, die Breite des Ansichtsfensters der tatsächlichen Auflösung auf dem physischen Gerät anzupassen und dem Benutzer kein Zoomen zu ermöglichen. Alle gängigen Web-Apps sind so eingerichtet, dass sie bewusst auf das Ansichtsfenster verzichten und die Seite nicht skalieren. Auf diese Weise muss die Auflösung der tatsächlichen Auflösung der Webseite entsprechen höher erscheinen. Schüler, die PS spielen, sollten alle wissen, wie es aussieht, wenn man ein 1000 * 1000-Bild direkt auf 500 * 500 Punkte skaliert, oder? Der Verzerrung des Bildes kann man sich nicht entziehen.

Aber die Anwendung, die ich erstellen möchte, ist genau das Gegenteil. Sie muss Ansichtsfenster und Zoom verwenden. Unabhängig von der tatsächlichen Auflösung und der physischen Größe möchte ich eine einheitliche Auflösung im Browser haben und dem Benutzer kein Zoomen ermöglichen. Zu den Geräten, die ich zum Testen verwendet habe, gehören: iPhone 4, iPad 2, das HTC G11, das Aquos-Telefon (Android-System) eines unbekannten Herstellers, das Android-Pad von ASUS und das Winphone von Dell. Dann bin ich auf die folgenden Probleme gestoßen:

1) Wenn das Ansichtsfenster nicht explizit festgelegt ist, beträgt die Breite standardmäßig 980. Wenn die Breite aller Elemente auf der Seite weniger als 980 beträgt, beträgt die Breite 980. Wenn die breiteste Position der Seite 980 überschreitet, entspricht die Breite der maximalen Breite. Kurz gesagt, die gesamte Seite kann standardmäßig von links nach rechts angezeigt werden. Wenn beispielsweise ein Ansichtsfenster festgelegt ist, wird einfach user-scalable=no festgelegt, z. B. , dann wird die Breite weiterhin als 980 angezeigt ios (d. h. standardmäßig wird es in dpi skaliert), aber es wird nicht mehr unter Android und Winphone skaliert. Die Browserauflösung stimmt mit der tatsächlichen Einstellungsauflösung überein.

2) Bei iOS-Geräten kann die Einstellung der Breite wirksam werden, bei Android wird die Einstellung der Breite jedoch nicht wirksam. Bei iOS-Geräten wird das Skalierungsverhältnis, d. h. dpi, automatisch basierend auf der von Ihnen eingestellten Breite und der tatsächlichen Auflösung berechnet. Unter Android ist die von Ihnen eingestellte Breite ungültig Das heißt, es gibt drei Variablen: Browserbreite, tatsächliche Breite des Geräts, dpi. Lassen Sie uns einfach eine Formel verwenden, um die Beziehung zwischen ihnen auszudrücken (keine echte Beziehung, nur zur einfachen Erklärung). Unter den drei Variablen ist die tatsächliche Breite des Geräts ein bekannter Wert, den wir nicht bearbeiten können . Wir können eine der beiden anderen Variablen so einstellen, dass sie sich auf die andere auswirkt. In iOS können wir die Browserbreite ändern, und in Android können wir die DPI und die Browserbreite ändern wird automatisch generiert. Für Android hat die Einstellung der Breite keinen Einfluss auf die Browserbreite.

ps: Lassen Sie mich hier über ein weiteres seltsames Problem sprechen: Wenn beim HTC G11 (ich habe nur dieses eine HTC-Telefon und die anderen habe ich nicht getestet) die DPI eingestellt wird, ohne die Breite explizit festzulegen, dann wird der Benutzer- scalable= no wird nicht wirksam, das heißt: , was den Benutzer nicht daran hindern kann, den Bildschirm zu skalieren. Wir müssen den Breitenwert explizit festlegen. Obwohl dieser Wert keinen Einfluss auf die Browserauflösung unter Android hat (unter iOS wird er dennoch Auswirkungen haben), müssen wir ihn dennoch festlegen und dieser Wert muss größer als 320 sein. Wenn der Wert kleiner oder gleich 320 ist, kann user-scalable=no nicht wirksam werden. Dieses Problem tritt nur auf dem HTC G11-Telefon auf, nicht auf dem Aquos-Telefon. Die Kompatibilität mit Android bereitet mir wirklich Kopfzerbrechen @_@, ich weiß nicht, wie viele Fallstricke es in Zukunft geben wird. Unter Winphone ist das Ergebnis noch seltsamer: Wenn ich die Breite des Ansichtsfensters auf einen Wert größer als 480 einstelle, ist user-scalable=no ungültig, aber wenn ich einen Wert kleiner als 480 einstelle, wird user-scalable=no akzeptiert Wirkung. Aber egal, welchen Wert ich für die Breite des Ansichtsfensters festlege, er hat nicht die erwartete Auswirkung auf die tatsächlich von Winphone angezeigte Breite, und target-densitydpi hat auch keine Auswirkung. Wenn die Breite kleiner als 480 ist, wird der Bildschirm skaliert, aber das Skalierungsverhältnis ist völlig anders als erwartet. Ich weiß nicht, nach welchen Regeln es skaliert. Ich weiß nicht, ob es sich hierbei um ein Winphone-Problem oder ein Dell-Implementierungsproblem handelt.

3) Dieser Artikel sollte in direktem Zusammenhang mit dem vorherigen stehen: Wenn sich das iOS-Gerät im Quer- oder Hochformat befindet, passt es die Auflösung automatisch an. Unabhängig vom Quer- oder Hochformat kann sichergestellt werden, dass die Browserbreite gleich ist gleich dem im Ansichtsfenster eingestellten Wert, sodass die Browserbreite dem im Ansichtsfenster eingestellten Wert entspricht. Wenn der Bildschirm eingeschaltet wird, wird die Größe des auf der Seite angezeigten Inhalts automatisch skaliert und geändert. Wenn sich das Android-Telefon im Quer- oder Hochformat befindet, ändert sich die Auflösung nicht, und wenn sich der Bildschirm im Quer- oder Hochformat befindet, wird die Webseite nicht gezoomt. Aus diesem Grund kann iOS sicherstellen, dass horizontale und vertikale Bildschirmseiten keine Bildlaufleisten haben und den Bildschirm ausfüllen. Android kann dies jedoch nicht garantieren. Wenn der Bildschirm horizontal voll ist, kann er vertikal nicht als Vollbild angezeigt werden, und umgekehrt.

4) Wenn bei iOS-Geräten die Breitenanzeige definiert ist und die breiteste Position der Seite die Breite überschreitet, ist die Breite ungültig und wird weiterhin entsprechend der breitesten Breite angezeigt (es gibt keine Bildlaufleiste). Zu diesem Zeitpunkt tritt jedoch ein sehr seltsames Problem auf. Nachdem Sie den Bildschirm Ihres Telefons mehrmals zwischen Quer- und Hochformat umgeschaltet haben, werden Sie feststellen, dass Ihre Seite automatisch vergrößert wird und eine Bildlaufleiste angezeigt wird, die vergrößerte Breite jedoch nicht die gleiche wie die Breite, die Sie eingestellt haben. Es spielt keine Rolle. Um dies zu verhindern, müssen Sie die Breite so einstellen, dass sie größer oder gleich dem breitesten Teil der Seite ist.