Einführung in die Meta-Viewport-Attributfähigkeiten in HTML-Webseiten

HTML-Meta-Viewport-Attributbeschreibung

Was ist Viewport?

Mobile Browser platzieren die Seite in einem virtuellen „Fenster“ (Viewport), normalerweise dieses virtuelle „Viewport“. breiter als der Bildschirm, sodass jede Webseite nicht in ein kleines Fenster gequetscht werden muss (dadurch wird das Layout von Webseiten zerstört, die nicht für mobile Browser optimiert sind). Benutzer können schwenken und zoomen, um die Unterschiede auf den Webseiten zu sehen . Teil. 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

Das Viewport-Meta-Tag einer häufig verwendeten Seite, die für mobile Webseiten optimiert ist, sieht ungefähr wie folgt aus:

Der Code lautet wie folgt :

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

width: Steuern Sie 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). CSS-Pixel bei Skalierung auf 100 %).
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 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 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 im Grunde alle Informationen wie folgt:

Der Code lautet wie folgt:

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

Die Bedeutung von Dieser Code lautet: Die Breite des Ansichtsfensters entspricht der tatsächlichen Auflösung auf dem physischen Gerät und ermöglicht dem Benutzer 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, 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 der Ansichtsbereich nicht explizit festgelegt ist, beträgt die Standardbreite 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 wird die Einstellung der Breite wirksam, 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 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 DPI ä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 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, passt es die DPI automatisch an und die Browserbreite kann garantiert werden Unabhängig vom horizontalen oder vertikalen Bildschirm entspricht er dem im Ansichtsfenster festgelegten Wert. Wenn der Bildschirm also horizontal oder vertikal ist, 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 wird keinen Scrollstreifen geben). 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.

Weitere Informationen zu Meta-Viewport-Attributtechniken in HTML-Webseiten finden Sie auf der chinesischen PHP-Website für verwandte Artikel!