renvert.com Logo Druckversion


Viewport:
Das Fenster zum modernen Webdesign.

Wie das Metatag Viewport ein responsives Webdesign überhaupt erst ermöglicht.

[zum Inhalt]
Hintergrundbild

Ein neues Metatag

Als im Jahr 2007 Apple das erste iPhone auf den Markt brachte, stellte man fest, dass eigentlich keine Webseite für den kleinen Bildschirm geeignet schien. Die Webseiten wurden komplett linear auf den Screen skaliert. Details sehen oder einzelne Abschnitte lesen konnte man, indem man auf den Bereich "doppelklickte. Dies bewirkte, dass der Bildausschnitt auf diesen Teilbereich gezoomt wurde. Apple legten den Viewport, also den sichtbaren Bereich, damals im Safari auf 980 Pixel fest.
Andere Smartphone-Hersteller legten nach; der geräteeigene Viewport war ganz unterschiedlich gewählt.
Die Notwendigkeit für einen allgemeinen HTML-Standard war geboren.

Man einigte sich auf ein neues Metatag, mit dessen Hilfe der Viewport für jede Seite individuell gesetzt werden konnte.

Die Auswirkung auf die Seite

Darstellung einer Website auf einem mobilen Device mit Viewport-Tag (links) und ohne (rechts)
Darstellung einer Website auf einem mobilen Device mit Viewport-Tag (links) und ohne (rechts) Quelle: http://html5-mobile.de

Das Viewport-Metatag korrekt anwenden

Damit die verschiedenen Layouts einer responsiven Website greifen können, muss der Viewport auf die Größe des Geräte-Bildschirms gesetzt werden, mit dem der Benutzer die Seite oder die Webapp besucht.

<!-- Setzen des Viewports im head-Bereich; minimale Anforderung -->
<head>
	<meta name="viewport" content="width=device-width" />
</head>

Das Tag erweitern

Das Ergebnis nach mit dieser Zeile ist, dass der Ausschnitt der Website schon korrekt gewählt ist. Allerdings lässt sich die Seite noch beliebig skalieren. Für ein echtes "App-Erlebnis" schränken wir nun auch diese Funktionalität ein.

<!-- Viewport: So klappt's auf allen Devices -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">

Das Attribut user-scalable=no verhindert die Skalierung durch den Nutzer. Das Attribut initial-scale=1.0 setzt die Skalierung der Website fest. Hier beschränken wir die initiale Skalierung und mit Hilfe von maximum-scale auch die maximale Skalierung auf 1.0 = 100 %. Wenn das CSS sauber ist, sollte ein Zoomen nicht notwendig sein. Außerdem verhindert dies Skalierungsfehler beim Drehen des Gerätes.

Folge mir auf twitter

Hinweis: Momentan ist die Geschwindigkeit meiner Website aufgrund eines Serverproblems bei meinem Hosting-Anbieter stark beeinträchtigt.
Ich bitte, diese Unannehmlichkeit zu entschuldigen.


Fenster schließen

Danke fürs Teilen.

Fenster schließen