Der Viewport definiert die Größe eines sichtbaren Bereiches auf einem Bildschirm. Der Begriff wird im Allgemeinen für Displays von mobilen Endgeräten wie Smartphones und Tablets verwendet.
Mit dem HTML5 Viewport Befehl lässt sich die Darstellung von Inhalten so skalieren, dass die Größe des Displays optimal ausgenutzt wird.
Ohne die Nutzung eines Viewports würden Browser von mobilen Endgeräten die anzuzeigenden Inhalte nicht an die kleineren Displays anpassen, was dazu führen würde, dass Nutzer eine Website nicht vollständig angezeigt bekämen, Sie müssten nach rechts scrollen, um Texte weiterlesen zu können. Des weiteren würden Texte und Grafiken sehr klein dargestellt werden, so dass Nutzer hineinzoomen müssten, um beispielsweise einen Button drücken zu können. Handelt es sich um eine Website mit vielen Elementen zur Interaktion und einem mehrspaltigen Layout, kann sie ohne entsprechende Skalierung auf mobilen Geräten unbenutzbar werden.
Durch den Viewport lassen sich Inhalte an Breite und Länge des Displays anpassen, so dass sich auch bei der Nutzung mobiler Endgeräte Inhalte von Websites vollständig und gut lesbar darstellen lassen. Nutzer müssen nicht hineinzoomen, sondern bekommen die Inhalte einer Seite so angezeigt, dass er zum kleinen Display des jeweiligen Endgerätes passt. Mit dem Viewport lässt sich somit sicherstellen, dass alle Inhalte, auch auf verschieden großen Displays, stets gleich gut lesbar sind und vollständig dargestellt werden.
Implementierung des Viewports als HTML oder in der CSS Datei
Viewports können auf zwei unterschiedliche Arten in einer HTML Datei hinterlegt werden: Entweder unmittelbar im Dokument oder in einer referenzierten CSS Datei, wobei sich die Syntax bei diesen beiden Alternativen nur geringfügig unterscheidet.
Wird der Viewport als Meta Tag direkt in die HTML Datei eingefügt, geschieht das meist durch folgende Angabe:
<meta name=viewport content="width=device-width, initial-scale=1">
In diesem Fall wird die Breite so definiert, dass sie sich an die Breite des Bildschirms des jeweiligen Gerätes anpasst (width=device-width). Die Angabe initial-scale steht für den anfänglichen Zoomfaktor und signalisiert im obigen Beispiel, dass die Seite im Verhältnis 1:1 auf dem Bildschirm des Mobilgeräts angezeigt werden soll.
Weiterhin kann mithilfe des Viewports auch die Höhe (height) definiert sowie ein minimaler (minimum-scale) und/oder maximaler Zoomfaktor (maximum scale) konfiguriert werden. Außerdem besteht die Möglichkeit, mithilfe des Meta-Tags zu verhindern, dass User zoomen können (user-scalable=no), was vor allem bei Apps sinnvoll ist.
Wird der Viewport stattdessen in der CSS Datei angegeben, sollte dies idealerweise direkt am Anfang der Datei geschehen, um für eine korrekte Darstellung zu sorgen. Hier könnte der Code wie folgt aussehen:
@viewport {
width: device-width;
}Typische Probleme bei der Implementierung
Die Hauptschwierigkeit in Bezug auf Viewports besteht darin, dass es eine stetig wachsende Anzahl von mobilen Geräten mit unterschiedlichen Displaygrößen gibt. Um dennoch möglichst auf allen vorhandenen Geräten eine optimale Darstellung zu erzielen, existieren verschiedene Tools und Programme, die überprüfen, inwieweit die korrekte Darstellung auf den handelsüblichen mobilen Geräten erfüllt wird. Solche Tools sind zum Beispiel das iOS MIH-Tool, Ghostlab und Adobe Edge Inspect. Letzteres ist auch für Windows erhältlich.
Eine weitere Schwierigkeit stellt die Pixeldichte dar. Schließlich ist nicht die Größe des Displays, sondern auch die Tiefe der Darstellung der Pixel ausschlaggebend für die Darstellung auf mobilen Endgeräten. Pixel sind zwar konstante Einheiten, aber Mobilgeräte haben oft eine größere Dichte an Pixeln als ältere Computer. Aus diesem Grund ist es wichtig, dass Entwickler sich Gedanken darüber machen, wie viel Content auf einem Display dargestellt werden soll und ob eine Skalierung sinnvoll ist.
