Suche Menü

Responsive Webseite Grundlagen: Meta-Viewport angaben

Eine der wichtigsten Voraussetzungen damit eine Responsive Webseite auf einem Smartphone richtig dargestellt wird ist die Meta-Angabe Viewport.

Die Meta-Angabe Viewport  (Erfindung von Apple) wird im <head> des Dokumentes untergebracht.
Mit der Meta-Angabe wird verhindert, dass ein mobiler Browser automatisch eine aufgerufene Webseite klein skaliert. Standardmäßig können Smartphones eine Breite von 980px darstellen.
Was zur Folge hat, die Inhalte der aufgerufenen Webseite werden so wie wir sie auf einem Desktopbildschirm sehen in den Viewport (für die Darstellung zur Verfügung stehende Bereich) des Smartphone gequetscht.
Was wiederum zur Folge hat, Text wird unleserlich und man muss Scrollen und Zoomen damit man sich durch den Inhalt arbeiten kann.
Eine Webseite ohne Meta-Angabe in Smartphone Ansicht.
meta_viewport_ohne01

Die gängigste und empfohlene Meta-Angabe lautet:
<meta name=“viewport“ content=“width=device-width“>
Mit dieser Meta-Angabe ist gewährleistet, dass auf allen gängigen mobilen Browsern ein vernünftiges Ergebnis erzielt wird.
Der Browser wird angewiesen, die Seite an die Breite des Smartphone-Bildschirm (Viewport) anzupassen. Wobei width eine Breite von 320px zugewiesen ist, das liegt daran, dass das IPhone auf 320px basiert und andere Hersteller sich einigermaßen daran orientieren.
Damit nun das Responsive Layout auch optimal auf einem Smartphone oder Tablett dargestellt wird, kommen die Media Queries zum Einsatz (mehr darüber demnächst in einem separaten Artikel)

Hier noch ein Beispiel wo der Unterschied ohne Meta-Angabe und mit Meta-Angabe deutlich zu sehen ist.
Ich habe im Beispiel zwei Absätze der obere eine Breite von 320px der untere eine 100% Breite.
Ohne Meta-Angabe sind die 320px deutlich zu klein dargestellt, was ja daran liegt, dass die Seite klein Skaliert wird um sie komplett darzustellen.
meta_viewport_ohne
meta_viewport_mit

Natürlich gibt es noch einiges an Parametern für die Meta-Angabe Viewport, eine ausführliche Liste der Möglichkeiten findet man auf der Apple Developer Seite.

Weitere Artikel zum Thema Responsive Webseite:
Flexibles Layout