{"id":31814,"date":"2024-11-12T12:40:19","date_gmt":"2024-11-12T12:40:19","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31814"},"modified":"2025-03-18T13:45:27","modified_gmt":"2025-03-18T13:45:27","slug":"Viewport","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Viewport","title":{"rendered":"Viewport"},"content":{"rendered":"

Definition<\/span><\/h2>\n
\n
\"Viewport\"<\/a> <\/p>\n
Abbildung:<\/b> Viewport – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Unter dem Begriff Viewport versteht man die Gr\u00f6\u00dfe eines Sichtfensters oder einer Sicht\u00f6ffnung auf einem Bildschirm. Der Begriff wird im Allgemeinen f\u00fcr Displays von mobilen Endger\u00e4ten wie Smartphones und Tablets verwendet.\n<\/p>\n

Eine enger gefasste Bedeutung des Begriffes Viewport bezieht sich auf das Meta Element in HTML 5<\/a>, welches bei der mobilen Optimierung<\/a> eine entscheidende Rolle spielt. Das Element skaliert den Inhalt, der auf einem Display angezeigt werden soll, dahingehend, dass die Gr\u00f6\u00dfe des Displays in idealer Weise ausgenutzt werden kann. Das Meta-Element Viewport ist in diesem Fall daf\u00fcr verantwortlich, dass alle Inhalte auf verschieden gro\u00dfen Displays gleich gut lesbar sind und korrekt und vollst\u00e4ndig dargestellt werden k\u00f6nnen. Die Seite und ihre Darstellung werden dabei durch den Viewport an Breite und L\u00e4nge des Displays angepasst, so dass der mobile Browser den gesamten Content korrekt anzeigen kann.\n<\/p>\n

Allgemeines zum Viewport<\/span><\/h2>\n

Dank des Viewports werden Webseiten auf mobilen Endger\u00e4ten nicht so dargestellt wie auf dem Computerbildschirm. Der Nutzer muss nicht hineinzoomen, sondern bekommt den Content einer Seite so angezeigt, dass er zum kleinen Display passt. Viewports als Meta-Element dienen also (in Kombination mit responsivem Webdesign) dazu, dem Browser dabei zu helfen, die Seiten so auseinanderzunehmen und auf dem kleinen Bildschirm wieder zusammenzusetzen, dass der Nutzer ein sinnvolles und lesbares Abbild erh\u00e4lt. Viewports haben somit die Aufgabe, Darstellungsprobleme zu verhindern, indem sie Ausgabeformate bestimmen, die auf das jeweilige mobile Ger\u00e4t zugeschnitten sind.\n<\/p>\n

Funktionsweise des Viewports im HTML Code oder in der CSS Datei<\/span><\/h2>\n

Viewports k\u00f6nnen auf zwei unterschiedliche Arten in einer HTML Datei hinterlegt werden: entweder unmittelbar im Dokument oder in einer referenzierten CSS Datei, wobei sich die Syntax<\/a> bei diesen beiden Alternativen nur geringf\u00fcgig unterscheidet.\n<\/p>\n

Wird der Viewport als Meta Tag direkt in die HTML Datei eingef\u00fcgt, geschieht das meist durch folgende Angabe:\n<\/p>\n

<meta name=viewport content=\"width=device-width, initial-scale=1\"><\/pre>\n
In diesem Fall wird die Breite so definiert, dass sie sich an die Breite des Bildschirms des jeweiligen Ger\u00e4tes anpasst (width=device-width). Die Angabe initial-scale steht f\u00fcr den anf\u00e4nglichen Zoomfaktor und signalisiert im obigen Beispiel, dass die Seite im Verh\u00e4ltnis 1:1 auf dem Bildschirm des Mobilger\u00e4ts angezeigt werden soll.\n<\/p>\n
Weiterhin kann mithilfe des Viewports auch die H\u00f6he (height) definiert sowie ein minimaler (minimum-scale) und\/oder maximaler Zoomfaktor (maximum scale) konfiguriert werden. Au\u00dferdem besteht die M\u00f6glichkeit, mithilfe des Meta-Tags zu verhindern, dass User zoomen k\u00f6nnen (user-scalable=no), was vor allem bei Apps sinnvoll ist.\n<\/p>\n
Wird der Viewport stattdessen in der CSS Datei angegeben, sollte dies idealerweise direkt am Anfang der Datei geschehen, um f\u00fcr eine korrekte Darstellung zu sorgen. Hier k\u00f6nnte der Code wie folgt aussehen:\n<\/p>\n
@viewport {\r\nwidth: device-width;\r\n}<\/pre>\n
M\u00f6gliche Schwierigkeiten<\/span><\/h2>\n
Die Hauptschwierigkeit in Bezug auf Viewports besteht darin, dass es eine stetig wachsende Anzahl von mobilen Ger\u00e4ten mit unterschiedlichen Abmessungen gibt. Um dennoch m\u00f6glichst auf allen vorhandenen Ger\u00e4ten eine optimale Darstellung zu erzielen, existieren verschiedene Tools und Programme, die \u00fcberpr\u00fcfen, inwieweit die korrekte Darstellung auf den handels\u00fcblichen mobilen Ger\u00e4ten erf\u00fcllt wird. Solche Tools sind zum Beispiel das iOS MIH-Tool, Ghostlab und Adobe Edge Inspect. Letzteres ist auch f\u00fcr Windows erh\u00e4ltlich. Als Erg\u00e4nzung zu diesen Testtools empfiehlt es sich, reale Tests durchzuf\u00fchren.\n<\/p>\n
Eine weitere Schwierigkeit stellt die Pixeldichte dar. Schlie\u00dflich ist nicht die Gr\u00f6\u00dfe des Displays, sondern eher die Tiefe der Darstellung der Pixel ausschlaggebend f\u00fcr die Darstellung auf mobilen Endger\u00e4ten. Pixel sind zwar konstante Einheiten, aber Mobilger\u00e4te haben oft eine gr\u00f6\u00dfere Dichte an Pixeln als \u00e4ltere Computer. Aus diesem Grund ist es wichtig, dass Entwickler sich Gedanken dar\u00fcber machen, wie viel Content auf einem Display dargestellt werden soll und ob eine Skalierung sinnvoll ist.\n<\/p>\n
Praxisrelevanz<\/span><\/h2>\n
Viewports sollten bei allen Websites entweder im HTML Code oder in der CSS Datei angegeben werden, um sicherzustellen, dass eine angemessene Darstellung auf mobilen Ger\u00e4ten m\u00f6glich ist. Insbesondere im Rahmen des Responsive Webdesign<\/a> ist der Viewport unverzichtbar und mittlerweile zum Standard f\u00fcr die mobile Optimierung geworden. Alle Webseitenbetreiber, die ihren Usern ein angenehmes und ungest\u00f6rtes Lese- und Surf-Erlebnis online bieten wollen, sollten sich mit diesem Thema auseinandersetzen, denn die Zahl der Nutzer, die \u00fcber Mobilger\u00e4te online geht, steigt kontinuierlich.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n