Februar 16, 2015

Ein gemalter schwarzer Rabe mit weit ausgebreiteten Schwingen überfliegt eine Landschaft mit Feldern, Wäldern, Dörfern und Straßen.

Der Viewport Meta-Tag

zur geräteabhängigen Darstellung von Websites

In der Ära mobiler Devices ist es mitlerweile fast schon selbstverständlich, die Website „responsive“ auszuliefern. Dadurch lassen sich verschiedene Darstellungen voneinander unabhängig für unterschiedliche Endgeräte optimieren.

Im Web gibt es zahlreiche Anwendungen, die mittels iframe die „responsive“ Darstellung jeder beliebigen Website simulieren. (Beispiel: mattkersley.com) Diese Ansichten sind für einen ersten Eindruck nützlich. Sie spiegeln jedoch nicht das tatsächliche Ergebnis auf den echten Geräten wieder. Man kann lediglich sehen, ob die Layout-Container entsprechend umbrechen. Bei der geräteabhängigen Darstellung auf mobilen Endgeräten kommt es daher auf die verwendeten Media-Queries und den Viewport-Meta-Tag an.

Browserfenster

Viewport Meta-Tag

Wenn kein Meta-Viewport-Tag angegeben wird stellt z.B. der mobile Browser Safari auf dem iPhone 4 die Website gezoomt auf einer Breite von 980px dar.

Weshalb ein Pixel nicht immer gleich ein Pixel ist

Neben dem iPhone besitzen viele weitere Geräte heutzutage hochauflösende Displays. Die Pixel sind somit kleiner und enger als bei herkömmlichen Displays. So werden beispielsweise bei dem iPhone 4 auf der gleichen Fläche wie zuvor die 4-fache Menge an Pixeln untergebracht. In der Breite sind es also nicht mehr nur 320 Pixel, sondern 640 Pixel. Würde die Website nun exakt auf die Device-Pixel dargestellt, wäre höchstwahrscheinlich die Schrift viel zu klein. Deshalb bleibt der Viewport gleich und die Angaben für Schrift und die weiteren Layoutelemente werden einfach umgerechnet.

Eine Überschrift mit der Größenangabe 24px, wird beim iPhone 4 also auf 48px hochgerechnet. Sie erscheint uns jedoch auf dem hochauflösenden Display wie 24px und nebenbei noch sehr scharf zu sein.

Web-Entwickler brauchen für die Gestaltung CSS-Pixel Angaben. Diese Pixel sind jedoch nicht identisch mit der tatsächlichen Pixeldichte des Geräts. Die Pixelangaben sind tatsächlich ein abstraktes Element, welches als Bezugsgröße für uns Web-Developer eingeführt wurde.

 

width: 500px, font-size: 16px

CSS-Pixel und Gerätepixel

4 Pixel enlarged

Sollte der Zoom Faktor 100% betragen entspricht 1 CSS-Pixel unter Umständen wirklich einem Gerätepixel. Im oberen Beispiel sind vier Pixel zu sehen. 1 CSS-Pixel entspricht hier einem Gerätepixel. Das muß jedoch nicht so sein. Tatsächlich übernimmt eine Zwischenschicht die Umrechnung in die Gerätepixel.

Am einfachsten ist der Unterschied zwischen CSS-Pixeln und Gerätepixeln zu verstehen, wenn wir uns einmal einen Zoom vorstellen. Zoomen wir ein Element mit einer Pixelbreite von 300px heran, dann nimmt dieses Element anschließend mehr und mehr Platz auf dem Screen ein. Die Pixelanzahl für das Element wird tatsächlich größer, als das Gerät tatsächlich an physikalischen Pixeln aufweist.

Die Darstellung von CSS Pixeln beim hereinzoomen

4 Pixel einzoomen

Das linke Bild zeigt die Gerätepixel und die CSS-Pixel, wenn der User hereinzoomt. Ein CSS Pixel überlappt nun mehrere Gerätepixel.

 

 

Die Darstellung von CSS Pixeln beim herauszoomen

auszoomen

Das linke Bild verdeutlicht, was passiert, wenn der User herauszoomt. Der dunkle blaue Hintergrund zeigt die Gerätepixel. Die CSS-Pixel werden durch den semi-transparenten Vordergrund dargestellt. Die CSS-Pixel werden also kleiner dargestellt. 1 Gerätepixel überlappt mehrere CSS Pixel.

 

Unser Element mit der Pixelbreite von 300px ist also nicht immer wirklich 300px groß. Wieviele Pixel dargestellt werden hängt vom gewählten Zoom-Faktor ab. Apple hat das noch ausführlicher beschrieben: UsingtheViewport

Akute Verwechslungsgefahr bei Media Query und Viewports

Die beiden Angaben zu Media Query „device-width“ und der „<meta name=“viewport“ width=“device-width“>-Tag werden in Gerätepixeln und nicht in CSS-Pixeln bemessen.

Die „Media Query“ Angabe

Die Angabe des Media Querys „device-width“ mißt also die jeweilige Breite des Geräts in Gerätepixeln. Die Angabe der Media Query „width“ bezeichnet also die absolute Breite der Seite in CSS-Pixeln. Dies entspricht auf dem iPhone wenigstens 980px.

device-width und width

Die Angabe der „device-width“ erfolgt also wie folgt:

div.box {
	width: 300px;
}

Hierbei definieren wir unser Element also mit einer Breite von 300px.

@media all and (max-device-width: 320px) {
	// styles assigned when device width is smaller than 320px;
	div.box{
		width: 100px;
	}
}

Nun haben wir im oberen Abschnitt eine Ausnahme definiert. Wenn die Screenbreite 320px unterschreitet wird das Element also lediglich mit einer Breite von 100px dargestellt.

Der Viewport Meta-Tag

Der Viewport Meta-Tag wurde anfänglich hauptsächlich von Apple-Geräten dargestellt. Mitlerweile wird er jedoch von zahlreichen weiteren mobilen Browsern unterstützt.

layout viewport

Durch den folgenden Meta-Tag wird der Layout Viewport mit der Breite des Gerätescreens gleichgesetzt.

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

Diese eine Codezeile sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät. Die Angabe bringt den Browser dazu, den Viewport des Layouts mit dem des Gerätes anzugleichen. Der Layout-Viewport ist gemessen in CSS-Pixeln der Maßstab, den der Browser nutzt, um die Abmessungen der darzustellenden Elemente zu berechnen. In der Praxis ist er meist etwas größer als der jeweilige Gerätescreen. (980px auf dem iPhone4, 850px in Opera, 800 in Android, etc.)

Skalierter Viewport

Die einwandfreie Simulation geräteabhängiger Webdesigns

Generell lassen sich geräteabhängige-Darstellungen am Desktop schlecht simulieren. Viele Geräte besitzen mitlerweile hochauflösende Displays. Die Pixel sind somit kleiner und enger als bei herkömmlichen Bildschirmen. Bei der Darstellung bleibt der Viewport gleich und die Layoutangaben werden einfach in die entsprechenden Werte umgerechnet.

Was sich auf dem Desktop kaum simulieren lässt sind Geräte- und Systemabhängige Systemschriftarten, deren Fallbacklösungen, systemspezifische Scrollbalkenbreiten, usw. Wenn man auf Nummer sicher gehen möchte führt daher meist kein Weg an der tatsächlichen Betrachtung auf dem jeweiligen Endgerät vorbei.

 

Über den Autoren

Stephan Bender

Meine Aufgabe besteht darin Qualität zu visualisieren und die Kommunikation von Menschen und Marken zu verbessern, damit die Botschaften so geschärft werden, dass sie bei der Zielgruppe einen optimalen Eindruck hinterlassen kann.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Weitere Artikel:

Subscribe now to get the latest updates!