Detaillierte Beschreibungsanalyse des HTML-Meta-Viewport-Attributs

Viewport ist nicht nur ein einzigartiges Attribut auf iOS. Es gibt auch Viewports auf Android und Winphone. Hier finden Sie eine detaillierte Einführung in den HTML-Meta-Viewport. Was ist Viewport?

Mobile Browser platzieren die Seite in einem virtuellen „Fenster“ (Viewport). Normalerweise ist dieses virtuelle „Fenster“ (Viewport) breiter als der Bildschirm, sodass nicht jede Webseite gestaucht werden muss . In kleineren Fenstern (die das Layout von Webseiten beeinträchtigen würden, die nicht für mobile Browser optimiert sind) können Benutzer 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.

Viewport-Grundlagen

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



width: Steuern Sie die Größe des Ansichtsfensters. Sie können einen Wert angeben, z. B. 600, oder einen speziellen Wert as device-width ist die Breite des Geräts in CSS-Pixeln bei 100 % Skalierung.
Höhe: Entspricht der Breite und gibt 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 zoomen kann

Einige Fragen zum Ansichtsfenster

Ansichtsfenster sind nicht nur ein einzigartiges Attribut auf iOS, es gibt auch Ansichtsfenster 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, sind die Auflösungen und physischen Größen der Geräte unterschiedlich unterschiedlich sind, können Sie festlegen, dass sie im Ansichtsfenster die gleiche Auflösung im Browser haben. Wenn Ihre Website beispielsweise 800 Pixel breit ist, können Sie die Breite des Ansichtsfensters auf 800 festlegen, sodass Ihre Website auf diesen drei verschiedenen Geräten auf dem gesamten 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 grundsätzlich alle Informationen wie folgt:



Die Bedeutung dieses Codes besteht darin, die Breite des Ansichtsfensters der tatsächlichen Auflösung auf dem anzupassen physisches Gerät und erlauben Benutzern kein Zoomen. 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 nicht erlauben, zu zoomen. Zu den Geräten, die ich zum Testen verwendet habe, gehören: iPhone 4, iPad 2, HTC G11, Aquos Phone (Android-System) eines unbekannten Herstellers, ASUS Android Pad und Dell WinPhone. Dann stieß ich auf die folgenden Probleme:

1) Wenn der Ansichtsbereich 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 ist 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 jedoch ungültig Weitere Informationen finden Sie in diesem Artikel: http://www.php.cn//748361279ebccd18908f9d7d.html. Mit anderen Worten, es gibt drei Variablen: Browserbreite, tatsächliche Gerätebreite und 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 verarbeiten 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 user -scalable=no nicht wirksam, das heißt: , was den Benutzer nicht an der Skalierung hindern kann den Bildschirm. 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 wirklich Kopfschmerzen @_@. 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 horizontalen oder vertikalen Bildschirm befindet, wird die Auflösung automatisch angepasst, unabhängig davon, ob der horizontale oder vertikale Bildschirm angezeigt wird Stellen Sie sicher, dass die Browserbreite dem im Ansichtsfenster eingestellten Wert entspricht. Wenn sich der Bildschirm also im Quer- oder Hochformat befindet, 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 garantieren, dass horizontale und vertikale Bildschirmseiten keine Bildlaufleisten erzeugen und nicht im Vollbildmodus angezeigt werden. Android kann dies jedoch nicht garantieren. Wenn der Bildschirm horizontal voll ist, kann er auch vertikal nicht im Vollbildmodus angezeigt werden.

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.

Für detailliertere Erklärungen und Analysen der HTML-Meta-Viewport-Attribute beachten Sie bitte die chinesische PHP-Website!