Viewport einstellen
19. Jan 2013
In der aktuellen BASE lässt sich der Viewport einstellen. Sie können dadurch festlegen, ob die Breite auf die optimale Bildschirmgröße skaliert werden soll.
Mit der aktuellen BASE können Sie festlegen, ob die Breite an den Anzeigebereich (Viewport) des Endgerätes angepasst werden soll oder nicht.
Neben der klassischen Vorgehensweise, bei der man zusätzlich zur Desktop-Darstellung eine mobil optimierte Darstellung abhängig vom Endgerät generiert, gewinnt Responsive Webdesign immer mehr an Bedeutung. Neu erstellte Webseiten, die Responsive Webdesign nutzen, können in vielen Fällen ganz auf eine mobile Version verzichten.
Unendlich viele Auflösungen
Ein Grund, weshalb Responsive Webdesign im Vergleich zur klassischen mobilen Ansicht immer mehr an Bedeutung gewinnt, ist dem Umstand geschuldet, dass es inzwischen eine immer größere Vielfalt an Bildschirmauflösungen gibt. Dies liegt vor allem am Tablet-Boom. War noch vor wenigen Jahren neben der klassichen 1024er Desktop-Auflösung fast ausschließlich die 320er Auflösung von iPhone und sonstigen Smartphones von Bedeutung, hat sich die Situation inzwischen völlig verschoben. Die Auflösungen sind inzwischen völlig unterschiedlich und es gibt praktisch kein Raster mehr. Spätestens mit den 7 Zoll Tablets wurden die Grenzen zwischen Desktops, Tablets und Smartphones fließend, was für eine Anpassung an die Auflösung über den Viewport für Responsive Webdesign spricht.
Viewport entsprechend der Breite des Endgerätes definieren
Beim Einsatz von Responsive Webdesign wird die Breite immer an das Endgerät angepasst. Dies geschieht über das Meta-Tag Viewport und der Angabe width=device-width, wodurch die vom Browser übermittelte Bildschirmbreite zur Darstellung genutzt wird. Die Webseite wird in diesem Fall genau so dargestellt, wie wenn Sie den Desktop-Browser auf diese Breite skalieren.
Darstellung ohne Viewport-Angaben
Falls keine automatische Breitenanpassung gewählt wird, versucht das Endgerät immer, die Seite möglichst optimal darzustellen. Ein iPhone oder iPad z.B. stellt dann immer 980 Pixel zur Verfügung, egal ob es quer- oder hochkant gehalten wird. Ist Ihre Seite für diese Breite optimiert, was in den meisten Fällen zutrifft, wird die Seite immer vollständig angezeigt. Das ist auf einem iPad optimal bis akzeptabel, bei einem iPhone hingegen ist die Lesbarkeit selbst bei neueren Modellen mit Retina Display meist nicht optimal.
Media Queries und Responsive Webdesign
Durch die Anpassung der Breite über den Viewport entsprechend der Breite des Endgerätes stellen Sie sicher, dass die Webseite immer in der optimalen Größe dargestellt wird. Dies setzt voraus, dass die Seite mit Hilfe von CSS Media-Queries für Responsive Webdesign optimiert wurde. Je nach verfügbarer Breite, werden Inhalte dann unterschiedlich angeordnet bzw. angezeigt, so dass die Zugänglichkeit der Webseite auf allen Endgeräten optimal ist.