CSS, HTML und Javascript mit {stil}

Mobile Geräte und Metatag viewport

Viewport – das sichtbare Browserfenster Meta viewport – Metatag für den Viewport der Mobilgeräte

Da die mobilen Geräte – vor allem Smartphones – so kleine Monitore haben, ist ihr Viewport fast immer deutlich größer als der Monitor.

Ohne das Metatag name=viewport zeigen die Broser auf iPhone, Android und Windows Phone die Webseite vollständig an und quetschen sie in den kleinen Monitor.

Mobile Safari hat einen Viewport von 980 Pixeln, genauso Opera … aber wir brauchen gar nicht erst mit der Aufzählung anzufangen: Smartphones haben unterschiedliche Auflösungen und ihre Monitore sind unterschiedlich groß.

Viewport Mobil ohne metatag Viewport und mit metatag Viewport

Geräte mit kleinem Monitor quetschen die Seite auf die Größe des Monitors – sie zoomen den Viewport. Text wird unlesbar klein, Bilder werden zu Briefmarken.

Das Auszoomen des Viewports auf die Größe des Monitors zeigt dem Besucher die vollständige Webseite. Ansonsten müsste der Besucher die Seiten rauf und runter, nach rechts und nach links schieben, um sich ein Bild von der Webseite zu machen und einen Text zu lesen.

Die Kombination aus einem responsiven Layout und dem viewport-Metatag ist der quasi-Standard für Webseiten auf kleinen Monitoren.

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

width=device-width eliminiert auch die winzige Verzögerung bei einem »Klick« auf Touchscreens

Design für mobile Geräte

Zoomen und das Tippen auf interessante Blöcke ist nicht immer eine elegante Lösung. Wenn auf der Webseite viele kleine Bereiche sitzen, kann diese Mimik den Benutzer überfordern. Dann ist es Zeit, den Besuchern mit kleinen Monitoren ein eigens angelegtes mobiles Webdesign vorzusetzen. U.U. kann ein alternatives Layout für mobile Geräte auch gleich noch ein paar Kilobyte bzw. Megabyte sparen und Bilder in angemessener Größe zeigen.

Viewport Mobile

Ein klassisches Muster für das »Grid« – das Layout-Raster« eines responsiven Webdesigns: Desktop, Tablett, Mobiltelefon

Peinlich wäre es, wenn eine Seite, die speziell für die Anzeige auf dem Smartphone entworfen wurde, ausgezoomt würde – dann würde das Smartphone die Seite nicht an denn Monitor anpassen, sondern – wie üblich – auszoomen und verkleinern. Die Webseite würde wie eine Briefmarke nur einen Teil des sowieso schon kleinen Monitors ausfüllen.

Den Viewport des Browsers steuern

Sowohl das Metatag viewport als auch die @viewport-CCS-Regel steuern den Viewport. Beide Methoden bieten dieselben Funktionen und unterscheiden sich nur leicht in ihrer Syntax.

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

Die @viewport-Regel kann an einer beliebigen Stelle im CSS stehen – aber am besten wird sie vor allen Media Queries platziert, vorzugsweise direkt am Anfang der CSS-Datei.

@viewport {
   width: 320px;
   zoom: 1;
}

Steuern der Viewport-Breite

Die Breite ist die wichtigste Eigenschaft des Viewports.

<meta name="viewport" content="width=320" />

oder 

@viewport {
   width: 320px;
}

Anpassbares Layout

Den Browser anweisen, die Seite an die Breite des Monitors anzupassen

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

oder 

@viewport {
   width: device-width;
}

In gleicher Weise kann auch die Höhe des Viewports gesetzt werden.

<meta name="viewport" content="initial-scale=1" />

@viewport {
   zoom:1;
}

Das ist der Standard: Wird die Breite des Viewports mit width=device-width angegeben, skaliert der Browser die Seite automatisch auf die 100%-Ansicht.

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

@viewport {
   width: device-width;
   zoom:1;
}

initial-scale=1 bzw. zoom:1; sind hier im Grunde genommen überflüssig. minimum-scale würde das Zoomen durch den Benutzers einschränken – nicht zu empfehlen.

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2" />

@viewport {
   width: device-width;
   min-zoom: 1; // o. 100%
   max-zoom: 2; // o. 200%
}

Die folgenden Regeln verwehren dem Benutzer das Skalieren und Zoomen der Seite. Diese Anweisung wird vor allem in Apps eingesetzt. Weniger Sinn macht die Anweisung auf Webseiten.

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

@viewport {
   width: device-width;
   user-zoom:fixed;
}
breiter als1260pxbreiter als800pxweniger als800pxweniger als480px