Viewport richtig setzen für mobile Geräte und Responsive Webdesign

Ruft man viele Websites auf dem Handy auf, bekommt man eine sehr kleine Version zu Gesicht und darf zoomen. Spaß macht es nicht wirklich, aber man bekommt einen Überblick über eine Website, die nach der althergebrachten Weise aufgebaut wurde.

Warum passiert diese Verkleinerung von Websites überhaupt? Warum wird auf einem Handy mit z. B. 320 Pixeln Bildschirmbreite die Website auf 980 Pixel angezeigt? Weil das mit dem iPhone 3 von Apple so festgelegt wurde. Zusätzlich hat Apple auch eine Metatag-Angabe festgelegt, um dieses Verhalten für den sogenannten Viewport beeinflussbar zu machen. Viewport ist kurz gesagt das Anzeigefenster, was beim Handy immer der kompletten Breite entspricht. Aber der Reihe nach.

Unter der URL http://www.html-seminar.de/rwd/ sind Beispielseiten hinterlegt, um sich das Verhalten live auf dem eigenen Handy ansehen zu können.

Wird eine Website erstellt und der Metatag für die viewport-Angabe nicht gesetzt, erhalten wir eine Fensterbreite und müssen fleißig zoomen. Dabei ging man damals wohl von 2 Annahmen aus:

  1. viele Websites waren auf einen Computermonitor von 1024 Pixel ausgelegt und das würde auch so bleiben
  2. die Menschen wollen lieber erst einen Überblick um gezielt vergrößern (zoomen) zu können

Warum 980 Pixel und keine 1024? Auf normalen Bildschirmen kommt noch der Rahmen und der Scrollbalken vom Browser dazu – zieht man diese ab, ist man bei den typischen 980 Pixel (am Rande bemerkt, andere Handyhersteller haben andere Pixelzahlen genommen – aber alle sind mit Zoomen verbunden).

Beispielwebsite unter http://www.html-seminar.de/rwd/viewport-deaktiviert.htm

Links sehen wir die „normale“ Übersichtsausgabe – Rechts mit Viewport-Angabe und lesbarer Schrift
Links sehen wir die „normale“ Übersichtsausgabe – Rechts mit Viewport-Angabe und lesbarer Schrift

Hier sehen wir die Annahme, dass nur Websites mit der viewport-Angabe auch für die Ausgabe auf kleinen Displays entsprechend vorbereitet (sprich das Design angepasst) wurde. Wir kommen also um diese Angabe nicht herum, weil auch alle anderen Handy-Hersteller diese Angabe übernommen haben und somit einen „de facto Standard“ geschaffen haben.

Interessant ist, dass je nach Ausrichtung des Handys eine unterschiedliche Zoomstufe der Schrift vorhanden ist. Nochmals unser Beispiel ohne Angabe des Viewport-Angabe auf dem Handy in beiden Ausrichtungen:

ohne Viewport mit unterschiedlicher Schriftgröße je nach Ausrichtung vom Handy
ohne Viewport mit unterschiedlicher Schriftgröße je nach Ausrichtung vom Handy

Anwendung der Metaangabe des Viewports

Der Viewport ist eine Metaangabe, die im Headbereich der Website angegeben wird.

<head>
<meta name="viewport" content="width=1200px">
</head>

Im Bereich Content wird nach der Angabe width (engl. Breite) die gewünschte Breite angegeben. In unserem Beispiel 1200 Pixel. Damit besser sichtbar, wurde der Bereich mit Gelb hinterlegt auf unserer Beispielseite unter http://www.html-seminar.de/rwd/viewport-width-1200px.htm

viewport fix auf 1200 Pixel eingestellt
viewport fix auf 1200 Pixel eingestellt

Durch den zu großen Viewport entstehen Löcher im Design. Dort steht kein Text, da die Sätze davor umgebrochen wurden über den HTML-Befehl <br>.

Die Nutzung von 1200 Pixeln für die Breite macht also nicht wirklich Sinn – aber was macht Sinn?

Welche Größe haben eigentlich Handy-Displays?

Eine Frage, die wir am besten durch eine Website beantworten können, die fleißig die Daten der meisten Handys sammelt: http://screensiz.es

Bildschirmgrößen und deren Popularität
Bildschirmgrößen und deren Popularität

Kurz gesagt – eine feste Angabe macht keinerlei Sinn!

Die einfache Lösung ist, dass wir dem Gerät sagen, nutze bitte als Breite deine native Breite – sprich die Angabe ist: width=device-width

Die Beispielseite ist zu finden unter:
http://www.html-seminar.de/rwd/viewport-genutzt.htm

Nutzung von width=device-width bei der Angabe des Viewports
Nutzung von width=device-width bei der Angabe des Viewports

Wieder ist bei der horizontalen Ausrichtung des Handys sichtbar, dass die Schriftgröße größer ist als bei der anderen Ausrichtung! Das kann durchaus gewünscht sein, aber kann auch sehr störend sein – je nachdem wie man sein Design erstellt.

Schriftgröße gleich egal welche Ausrichtung

Um die annähernd gleiche Schriftgröße zu bekommen, egal welche Ausrichtung das Handy gerade hat, kann die Viewport-Angabe erweitert werden. Beispielseite:
http://www.html-seminar.de/rwd/viewport-genutzt-scale-1.htm

Schriftgröße auf Handy gleich egal welche Ausrichtung
Schriftgröße auf Handy gleich egal welche Ausrichtung

Unsere Angabe width wird ergänzt um width=device-width, initial-scale=1

Im direkten Vergleich zwischen initial-scale und ohne diese Angabe fällt es besser auf:

Handy: Vergleich zwischen initial-scale und ohne
Handy: Vergleich zwischen initial-scale und ohne

Viewport-Angabe richtig gesetzt für mobile Geräte

Somit hätten wir als vollständige Angabe dann:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Somit haben wir eine anständige Schriftgröße und können nun unser Design für die mobile Seite erstellen.

Eine automatische Umschaltung zwischen dem Design für die mobilen Geräte und Geräten mit großer Auflösung wird durch Media Queries erzeugt. Damit sind wir einen Schritt weiter in Richtung Responsive Webdesign.