Beschreibung der HTML-Meta-Viewport-Attribute

Was ist ein Ansichtsfenster?

Mobile Browser platzieren Webseiten in einem virtuellen „Fenster“ (Ansichtsfenster), das normalerweise breiter als der Bildschirm ist. Auf diese Weise ist es nicht nötig, jede Webseite in ein kleines Fenster zu quetschen (was das Layout von Webseiten zerstören würde, die nicht für mobile Browser optimiert sind). Benutzer können verschiedene Teile der Webseite durch Schwenken und Zoomen anzeigen. Die mobile Version von Safari hat vor kurzem den Viewport-Meta-Tag eingeführt, mit dem Webentwickler die Größe und den Zoom des Ansichtsfensters steuern können. Andere mobile Browser unterstützen dies grundsätzlich auch.

Ansichtsfenster-Grundlagen

Ein häufig verwendeter Viewport-Meta-Tag für eine für Mobilgeräte optimierte Seite sieht folgendermaßen aus:

<Metaname=”Ansichtsfenster” Inhalt=”Breite=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1″>

Breite: steuert die Größe des Ansichtsfensters. Sie können einen Wert wie 600 oder einen speziellen Wert wie die Gerätebreite angeben. Dabei handelt es sich um die Breite des Geräts (in CSS-Pixeln bei einem Zoom von 100 %).
Höhe: Gibt die Höhe an, die der Breite entspricht.
initial-scale: Das anfängliche Zoomverhältnis, d. h. das Zoomverhältnis beim ersten Laden der Seite.
maximum-scale: Der maximale Maßstab, bis zu dem der Benutzer zoomen darf.
Mindestmaßstab: Der Mindestmaßstab, auf den der Benutzer zoomen darf.
user-scalable: Ob der Benutzer manuell skalieren kann

Einige Fragen zum Ansichtsfenster

Viewport ist kein einzigartiges Attribut von iOS, sondern existiert auch auf Android und Windows Phone. Das Problem, das sie zu lösen versuchen, ist dasselbe: Sie ignorieren die tatsächliche Auflösung des Geräts und setzen die Auflösung direkt zwischen der physischen Größe und der des Browsers über dpi zurück. Diese Auflösung hat nichts mit der Auflösung des Geräts zu tun. Nehmen Sie beispielsweise ein 3,5-Zoll-iPhone 3 gs mit 320 x 480, ein 3,5-Zoll-iPhone 4 mit 640 x 960 oder ein 9,7-Zoll-iPad 2 mit 1024 x 768. Obwohl die Auflösung und physikalische Größe der Geräte unterschiedlich sind, können Sie ihnen durch Einstellen des Ansichtsfensters im Browser die gleiche Auflösung verleihen. Wenn Ihre Website beispielsweise 800 Pixel breit ist, können Sie die Ansichtsfensterbreite auf 800 einstellen, damit Ihre Website auf diesen drei verschiedenen Geräten vollständig angezeigt wird.

Ich glaube, dass jeder, der ein wenig über Ansichtsfenster Bescheid weiß, die oben genannten Kenntnisse verstanden haben sollte. Dies ist nicht der Punkt, über den ich heute sprechen möchte. Ich möchte einige Unterschiede in der Ansichtsfensterleistung unter iOS und Android erklären.

Eine schnelle Suche im Internet nach Ansichtsfenstern ergibt im Wesentlichen alle folgenden Informationen:

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Minimalmaßstab=1.0, Benutzerskalierung=nein" />

Dieser Code bedeutet, dass die Breite des Ansichtsfensters der tatsächlichen Auflösung auf dem physischen Gerät entspricht und der Benutzer nicht zoomen darf. Alle gängigen Webanwendungen sind so eingerichtet. Die Funktion besteht eigentlich darin, den Ansichtsbereich bewusst zu verlassen und die Seite nicht zu skalieren. Auf diese Weise muss die dpi der tatsächlichen Auflösung auf dem Gerät entsprechen. Ohne Skalierung erscheint die Webseite filigraner. Wer sich mit Photoshop auskennt, weiß doch, wie es aussieht, wenn man ein 1000*1000 Bild direkt auf 500*500 skaliert, oder? Bildverzerrungen lassen sich nicht vermeiden.

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, unabhängig von der physischen Größe, möchte ich eine einheitliche Auflösung im Browser haben, ohne dem Benutzer das Zoomen zu ermöglichen. Die Geräte, die ich zum Testen verwendet habe, sind: iPhone 4, iPad 2, HTC G11, Aquos Phone (Android-System) von unbekanntem Hersteller, Asus Android Pad, Dell Win Phone. Dabei sind mir folgende Probleme begegnet:

1) Wenn das Ansichtsfenster nicht explizit festgelegt ist, beträgt die Standardbreite 980. Wenn die Breite aller Elemente auf der Seite kleiner als 980 ist, beträgt die Breite 980. Wenn die breiteste Stelle 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 der Ansichtsrahmen beispielsweise nur auf user-scalable=no eingestellt ist, also etwa <meta name="viewport" content="user-scalable=no" />, dann wird die Breite unter iOS zwar noch als 980 angezeigt (also standardmäßig nach dpi skaliert), unter Android und Windows Phone hingegen nicht mehr und die Browserauflösung stimmt mit der tatsächlich eingestellten Auflösung überein.

2) Bei iOS-Geräten kann die Einstellung der Breite wirksam sein, bei Android-Geräten bleibt die Einstellung der Breite jedoch unwirksam. Auf iOS-Geräten wird das Skalierungsverhältnis, also dpi, automatisch basierend auf der von Ihnen eingestellten Breite und der tatsächlichen Auflösung berechnet. Unter Android ist die Einstellung der Breite jedoch ungültig. Was Sie einstellen können, ist ein spezielles Feld, target-densitydpi. Das heißt, es gibt drei Variablen: Browserbreite, tatsächliche Gerätebreite und dpi. Verwenden wir einfach eine Formel, um die Beziehung zwischen ihnen auszudrücken (keine echte Beziehung, nur zur einfachen Erklärung): tatsächliche Gerätebreite * dpi = Browserbreite. Von den drei Variablen hier ist die tatsächliche Gerätebreite ein bekannter Wert, den wir nicht manipulieren können. Bei den anderen beiden Variablen können wir eine so einstellen, dass sie die andere beeinflusst. Unter iOS können wir die Browserbreite ändern und die dpi wird automatisch generiert. Unter Android können wir die dpi ändern und die Browserbreite wird automatisch generiert. Unter Android hat die Einstellung der Breite keine Auswirkungen auf die Browserbreite, unabhängig davon, wie wir sie festlegen.

P.S.: Hier möchte ich noch auf ein weiteres merkwürdiges Problem eingehen: Beim HTC G11 (ich habe nur dieses eine HTC-Telefon und habe keine anderen getestet) wird, wenn die DPI eingestellt wird, ohne die Breite explizit festzulegen, die Option „user-scalable=no“ nicht wirksam, d. h.: <meta name="viewport" content="target-densitydpi=300,user-scalable=no" />, nicht verhindert, dass Benutzer den Bildschirm vergrößern oder verkleinern. Wir müssen den Breitenwert explizit festlegen. Obwohl dieser Wert unter Android keine Auswirkung auf die Bildschirmauflösung des Browsers hat (unter iOS hat er immer noch Auswirkungen), müssen wir ihn dennoch festlegen. Dieser Wert muss größer als 320 sein. Wenn er kleiner oder gleich 320 ist, wird user-scalable=no nicht wirksam. Dieses Problem tritt nur beim G11-Telefon von HTC auf und nicht beim Aquos-Telefon. Die Kompatibilität mit Android ist wirklich ein Problem @_@, und ich weiß nicht, wie viele Fallstricke es in Zukunft noch geben wird. Unter Windows Phone ist das Ergebnis noch merkwürdiger: Wenn ich die Ansichtsfensterbreite auf einen Wert größer als 480 einstelle, wird „user-scalable=no“ ungültig, wenn ich sie jedoch auf einen Wert kleiner als 480 einstelle, wird „user-scalable=no“ wirksam. Aber egal welchen Wert ich für die Ansichtsfensterbreite einstelle, es hat nicht den erwarteten Effekt auf die tatsächliche Anzeigebreite von Winphone, und auch target-densitydpi hat keinen Effekt. Wenn die Breite auf weniger als 480 eingestellt ist, wird der Bildschirm skaliert, aber das Verkleinerungsverhältnis ist völlig anders als erwartet. Ich weiß nicht, welcher Regel beim Skalieren gefolgt wird. Ich weiß nicht, ob dies ein Problem mit Winphone oder der Implementierung von Dell ist.

3) Dieser Punkt steht in direktem Zusammenhang mit dem vorherigen: iOS-Geräte passen die DPI automatisch an, wenn sich der Bildschirm im Quer- oder Hochformat befindet. Unabhängig davon, ob sich der Bildschirm im Quer- oder Hochformat befindet, entspricht die Browserbreite dem im Ansichtsfenster festgelegten Wert. Daher wird die Größe des auf der Seite angezeigten Inhalts automatisch skaliert und geändert, wenn sich der Bildschirm im Quer- oder Hochformat befindet. Wenn sich das Android-Telefon jedoch im Quer- oder Hochformat befindet, ändert sich die DPI nicht und die Webseite wird nicht skaliert, wenn sich der Bildschirm im Quer- oder Hochformat befindet. Aus diesem Grund kann iOS sicherstellen, dass die Seite sowohl in horizontaler als auch in vertikaler Ausrichtung keine Bildlaufleisten hat und im Vollbildmodus angezeigt wird. Android kann dies jedoch nicht garantieren. Wenn die Seite den Bildschirm horizontal ausfüllt, kann sie ihn nicht vertikal ausfüllen und umgekehrt.

4) Wenn bei iOS-Geräten die Breite definiert ist und der breiteste Teil der Seite die Breite überschreitet, ist die Breite ungültig und die Seite wird weiterhin mit der größten Breite (ohne Bildlaufleiste) angezeigt. Dabei tritt jedoch ein sehr merkwürdiges 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 hat jedoch tatsächlich nichts mit der von Ihnen eingestellten Breite zu tun. Um dies zu verhindern, müssen Sie die Breite größer oder gleich dem breitesten Teil der Seite einstellen.