Unter dem Begriff Viewport versteht man denjenigen Bereich einer Webseite, der für einen Benutzer sichtbar ist.
Welcher Bereich einer Webseite eingeblendet wird, hängt im Wesentlichen vom verwendeten Gerät ab – bei einem Smartphone beispielsweise ist der sichtbare Bereich kleiner als bei einem Desktop-PC.
Der Viewport gewinnt seit einiger Zeit zunehmend an Bedeutung. Während es vor einigen Jahren ausreichend war, Webseiten ausschließlich für die Anzeige auf einem PC zu optimieren, so müssen heute vielfältige – auch mobile Geräte – in den Design- und Entwicklungsprozess mit einbezogen werden. Die Größe einer Webseite ist nun auch nicht mehr statisch, sondern passt sich in der Regel dynamisch dem verwendeten Gerät an.
Festlegung des Viewport mittels eines Meta-Tags
Um zu erreichen, dass sich die Größe einer Webseite dynamisch an die zur Anzeige verwendete Bildschirmgröße anpasst, setzt man in der Webentwicklung das Viewport Tag ein. Dieses ist seit HTML 5 verfügbar und wird im Rahmen der Meta-Informationen zu einer Webseite benutzt.
Das Viewport Meta Tag teilt dem Browser mit, wie er mit den verschiedenen Bildschirmgrößen und Skalierungen umgehen soll.
In seiner einfachsten Form lautet das Viewport Meta Tag „<.meta name=viewport“ content=“initial-scale=1.0, width=device-width.>“ Während die Anweisung „width=device-width“ bedeutet, dass die Breite der Webseite der Screen-Breite des verwendeten Geräts entsprichen soll, ist mit „initial-scale=1.0“ die anfängliche Zoom-Level, mit der Webseite zunächst im Browser geladen wird, gemeint.
Regeln für den Umgang mit dem Viewport Meta Tag Wer das Viewport Meta Tag optimal einsetzen will, sollte einige Regeln beherzigen. So sollte beachtet werden, dass sich die meisten User, ganz gleich, ob sie einen Desktop-PC oder ein mobiles Gerät wie Smartphone oder Tablet benutzen, Webseiten vertikal und nicht horizontal ansehen.
Des Weiteren sollte das Viewport Meta Tag nicht zusammen mit sehr breiten Inhaltselementen verwendet werden. Enthält die Webseite zum Beispiel ein Foto oder ein Video, dessen Breite größer ist als die Bildschirmbreite einiger der zur Anzeige verwendeten Geräte, so kann dies dazu führen, dass die Webseite horizontal angezeigt wird, was den Gewohnheiten zahlreicher Benutzer widerspricht.
Weitere Informationen und Links:
Weitere Informationen zum Viewport Meta Tag: http://www.intensivstation.ch/snippets/viewport-meta-tag/
Tipp: Vergiss nicht das Viewport Meta Tag: http://webdesign.tutsplus.com/de/articles/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972
HTML 5 Mobile : Den Viewport richtig einstellen: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen