So verwenden Sie das Meta-Viewport-Attribut von HTML

Dieses Mal zeige ich Ihnen, wie Sie das Meta-Attribut Viewport von HTML verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Meta-Viewport-Attributs von HTML? ein Blick. Was ist ein Ansichtsfenster?

Mobile Browser platzieren die Seite in einem virtuellen „Fenster“ (Ansichtsfenster). Normalerweise ist dieses virtuelle „Fenster“ (Ansichtsfenster) breiter als der Bildschirm, sodass es nicht erforderlich ist, jedes einzelne Fenster zu platzieren Die darin enthaltene Seite wird in ein sehr kleines Fenster gequetscht (was das Layout von Webseiten zerstören würde, die nicht für mobile Browser optimiert sind), und 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.

Ansichtsfenster-Grundlagen
Ein häufig verwendetes Ansichtsfenster-Meta-Tag für Seiten, die für mobile Webseiten optimiert sind, lautet ungefähr wie folgt:

width: Steuert die Größe des Ansichtsfensters, ein Wert, der kann angegeben werden, wenn 600 oder ein spezieller Wert wie „device-width“ die Breite des Geräts ist (in CSS-Pixeln bei Skalierung auf 100 %).

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

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 Ansichtsfenster auch 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 Ansichtsfenster im Internet lauten im Grunde alle Informationen wie folgt:

Die Bedeutung dieses Codes besteht darin, die Breite des Ansichtsfensters der tatsächlichen Auflösung anzupassen Auf dem physischen Gerät dürfen Benutzer nicht 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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

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, HTC G11, Aquos Phone (Android-System) eines unbekannten Herstellers, ASUS Android Pad und Dell Winphone. 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. 9e8e8b84bcea832bca90b002cb76dabf, 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 jedoch ungültig Weitere Informationen finden Sie in diesem Artikel: http://hi.baidu.com/j_fo/blog/item /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 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 user -scalable=no nicht wirksam, das heißt: 9a7a92fde93719ab207d2cf0a9d1855c, 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 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.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website andere verwandte Artikel!

Verwandte Lektüre:

So realisieren Sie die mobile adaptive Webseitengröße

So verwenden Sie die horizontale HR-Linie in HTML

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Meta-Viewport-Attribut von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!