Das viewport Meta-Tag

In den letzten Wochen erhielten wir zahlreiche Fragen zur Verbesserung der mobilen Nutzerfreundlichkeit. Besonders die Frage nach der Konfiguration des Darstellungsbereichs mit Hilfe des viewport Meta-Tags sorgte für Interesse. Daher wollen wir nochmals auf das Thema „Optimierung für Mobilgeräte“ eingehen.

Das Element viewport

Meta-Tags sind vielfach nutzbar. Mit ihrer Hilfe lassen sich Seitentitel und Seitenbeschreibung definieren. Wir können festlegen, ob eine Seite indexiert werden soll und vieles mehr. Für die Darstellung auf Mobilgeräten können wir das viewport Meta-Tag (auf Deutsch Ansichtsfenster oder Anzeigebereich) nutzen. Es sorgt für eine korrekte Skalierung der Webseite beim Aufruf auf einem mobilen Gerät. Dies ist gerade dann wichtig, wenn wir keine gesonderte Seitenversion für Handys und Smartphones erstellt haben.

Warum die Darstellung anpassen?

Wenn wir beispielsweise mit einem Smartphone eine Webseite oder einen Onlineshop aufrufen, geht der Browser davon aus, dass die Seite nicht für Mobilgeräte wie iPad, iPhone 5, Nexus 7 oder Galaxy S3 ausgelegt ist. Dann würde die Breite der Seite den Darstellungsbereich überschreiten. Da der Anzeigebereich des Browsers auf eine kleinere Breite eingestellt ist, würden die Inhalte und Schriften sehr klein angezeigt werden. Um den Inhalt lesen zu können, muss der User dementsprechend zoomen. Das viewport Meta-Tag kann helfen!

Über das viewport Meta-Tag können wir den Darstellungsbereich einstellen und anpassen, wie der Benutzer die Darstellung ändern kann. Für iOS handelt es sich nach Apple um das wichtigste Element zur Optimierung der Seiten.

This is the single most important optimization that you can do for iOS—make sure your webpage looks good the first time it is displayed on iOS.

Parameter des viewport Meta Tag

Über diverse Parameter lässt sich das viewport Meta-Tag konfigurieren. Wir betrachten exemplarisch einige Einstellungen.

Parameter width

Mittels dieses Parameters wird den mobilen Geräten mitgeteilt, wie die Seitenbreite behandelt werden soll. Setzt man den Wert auf „device-width“, passt sich die Seite automatisch an das Gerät an und wird responsiv angezeigt. Aber auch Pixelangaben sind möglich.

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

Parameter user-scalable

Hier können wir festlegen, ob der Benutzer den Zoom-Faktor ändern kann. Standardmäßig ist dieser Parameter auf „yes“ gesetzt. Eine Änderung des Wertes sollte nur vorgenommen werden, wenn die Seite ein komplett responsive Design anbietet.

<meta name=”viewport” content=”user-scalable=yes“>

Parameter initial-scale

Diese Einstellung definiert den Standard Zoom Faktor, der Grundwert ist 1.

<meta name=”viewport” content=”initial-scale=1“>

Parameter maximum-scale

Hiermit lässt sich einstellen, wie hoch der maximal mögliche Zoom Faktor ist. Ein Wert von 1 hätte zur Folge, dass der Nutzer die Seite nicht zoomen könnte.

<meta name=”viewport” content=”maximum-scale=4“>

Die aufgeführten Parameter lassen sich in einer einzigen Meta-Angabe definieren. Nachfolgend ein Beispiel, wie obige Einstellungen zusammengefasst aussehen würden:

<meta name=”viewport” content=„width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=4“>

Fazit

Das viewport Meta-Tag bietet sich insbesondere dann an, wenn beispielsweise aus Kostengründen keine gesonderte Mobil-Version angeboten wird. Sie suchen eine Webentwicklungsagentur? Sprechen Sie unser SEO-Agentur noch heute an und lassen Sie sich beraten.

Linktipps:

• https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport
• http://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
• www.mobilephoneemulator.com
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html