Viewport für Responsive Webdesign richtig verwenden

Responsive Webdesign liegt schwer im Trend. Doch, um das Design für die verschiedensten Auflösungen anzupassen, bedarf es einiger Vorarbeit. Das Viewport-Element ist quasi eine wichtige Voraussetzung. Was bewirkt das überhaupt? Diese winzige Angabe verrät dem Browser, dass es eine mobile Darstellung gibt und mit welcher Auflösung diese angezeigt wird. Dadurch entsteht keine Vergrößerung oder Verkleinerung der Anzeige. Die Anweisung hat es also ganz schön in sich. Wie sollte nun das Element aussehen, welche Attribute existieren und was bewirken sie? Der Aufbau ist schnell erklärt, los geht’s mit folgender Syntax <meta name="viewport" content=" ">. Beim Attribut content stehen verschiedene Möglichkeiten zur Wahl, durch Komma-Trennung sind auch mehrere Werte erlaubt. Alle aktuell gültigen Eigenschaften habe ich kurz aufgelistet.

Übersicht aller verfügbaren Viewport-Eigenschaften

  • width=device-width oder Zahl
    Breite des Anzeigebereichs in Pixel oder Gerätebreite
  • height=device-height oder Zahl
    Höhe des Anzeigebereichs in Pixel oder Gerätehöhe
  • initial-scale=Zahl
    Startwert des Default-Zoomfaktors (üblicherweise 1.0)
  • minimum-scale=Zahl
    Minimaler Zoomfaktor, der dem Nutzer zur Verfügung steht
  • maximum-scale=Zahl
    Maximaler Zoom, den der User verwenden kann
  • user-scalable=yes oder no
    erlaubt bzw. verbietet die Zoomfunktion für den Seitenbesucher
  • minimal-ui
    Brandneu, funktioniert derzeit nur in iOS 7.1 und reduziert Menüelemente im Safari auf ein Minimum

Mögliche Viewport-Konfiguration:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Durch die Festlegung device-width erfährt der Browser, dass die komplette Breite des Anzeigebereichs genutzt werden soll und beim Aufruf nicht gezoomt wird. Damit verhindert die Viewport-Angabe das Hereinzoomen, falls die Webseite größer als der eigentliche Anzeigebereich sein sollte. Das alleine macht allerdings noch kein responsives Design aus. CSS Media Queries und wunderbar an. Auf diese doch recht simple Weise kann man dem Browser sagen, wie er Element XY bei einer Seitenbreite von beispielsweise 685 Pixeln darstellen soll. Im Gegensatz zu einer mobilen Webseite oder App, braucht es keine andere URL.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

2 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Anja · · #

    Sehr schön erklärt! Danke

  2. Kommentar von reraiseace · · #

    Bitte. Freut mich, dass ich dir damit helfen konnte :)