Logo

Pixelbande Webdesign

Der Viewport auf unterschiedlichen Endgeräten

Lesezeit: 2 Minuten, 6 Sekunden

Prinzipiell verhalten sich Browser ähnlich, egal ob auf einem Smartphone, TabletPC oder Desktopsystem. Responsives Webdesign macht eine benutzerfreundliche und dem Gerät angepasste Darstellung der Inhalte mit eventuell sogar unterschiedlichen Layouts und Schmuckelementen möglich. Ein paar Eigenheiten gibt es aber doch, sonst wäre es ja auch zu einfach…

Auf Desktopsystemen gibt es zwei ausschlaggebende Parameter für die Darstellung im Browser: die native Auflösung des Displays und die Fenstergröße. Bei mobilen Browsern kommen noch andere Komponenten hinzu, z.B. das Verhältnis / der Zoomfaktor zwischen physischen und virtuellen Pixeln. Gemeint ist das Übertragen der im Stylesheet der Webseite per CSS ausgewiesenen Größenangaben auf ein virtuelles Fenster (dem Viewport) auf dem mobilen Endgerät. Dieses Fenster rechnet der mobile Browser so lange klein, bis das Webseitenlayout komplett die physische Fläche des Displays ausfüllt. Das führt dann meistens zu Scrollbalken. Besucher solcher Webseiten müssen dann von der anfänglichen, ausgezoomten Ansicht in einzelne Elemente einer Seite zoomen, bevor sie diese auch lesen können.

Wie groß der virtuelle Layout-Viewport ist und welchen Zoomfaktor der Browser für die Webseite benutzen soll, kann man mittels des viewport-Meta-Elements festlegen:

Ist im kein Viewport definiert, so rendern die Browser mobiler Endgeräte die Webseite an die Geräte breite angepasst. Ein Content-Element mit 980px Breite wird also auf z.B. 320px Breite gequetscht.

Eine Webseite, die spezifisch auf Breite von 480px ausgelegt ist und so aus dargestellt werden soll, anstatt wie oben "auszuzoomen" wird so definiert:

<meta name="viewport" content="width=480">

Eine weitere Komponente ist der Modus "portrait" und "landscape", also die Ausrichtung des Gerätes. Dafür kann man dann die speziellen Konstanten "device-width" und "device-height" verwenden.

<meta name="viewport" content="width=device-width">

setzt den Viewport auf verschiedene Breiten für Smartphones und Tablets je nach Orientierung. Das heißt nun aber auch, dass das Layout sich (wie auf Desktopsystemen) auf eine Vielzahl an verschiedenen Displaydimensionen anpassen muss. Hier leisten Media Queries und Responsive Webdesign Abhilfe.

Layouts mit einer fest vorgegebenen Breite werden bei der oben ausgezeichneten Methode leider nur gezoomed angezeigt. Des weiteren reagieren Browser je nach Hersteller verschieden: Safari auf iOS setzt "device-width" stets auf die schmalere, "device-height" dagegen immer auf die längere Seite eines iPhones oder iPads, selbst wenn das Gerät quer gehalten wird. Andere mobile Browser verhalten sich logischer – "device-width" und "device-height" beziehen sich dann folgerichtig auf die horizontale oder vertikale Seite, und verändern sich je nach Orientierung. Eine Lösung für dieses Webdesign-Problem ist

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no" />

Mit "initial-scale" kann der Inhalt skaliert werden, und zwar um jeden beliebigen Wert. 1.0 bedeutet 100%, also "Normalansicht".

Die Pixelbande:
Webdesigner aus Leidenschaft

Wir freuen uns auf Ihre
Projektanfrage. Schreiben Sie uns eine E-Mail!

Über uns

Wir erstellen Websites und Blogs für Unternehmen oder Privatpersonen. Wir überarbeiten Ihre bereits bestehende Webseite hinsichtlich eines modernen User Interface (UI) oder einer schlüssigen User Experience (UX). Wir unterstützen Sie gerne auch bei Ihrer Suchmaschinenoptimierung (SEO).