Viewport

Diese Begriffserklärung teilen
« Zurück zum Glossar Index

Der Viewport bezeichnet den sichtbaren Bereich einer Webseite oder einer Anwendung, der für den Benutzer auf dem Bildschirm sichtbar ist. Er ist der Bereich, in dem der Inhalt einer Webseite angezeigt wird, und variiert je nach Gerät, Bildschirmgröße und Auflösung.

Bedeutung und Anwendung:

  1. In der Webentwicklung:
    • Der Viewport ist entscheidend für die Gestaltung von responsive Webseiten. Eine responsive Webseite passt sich automatisch an die Größe des Viewports an, um eine optimale Benutzererfahrung auf verschiedenen Geräten wie Smartphones, Tablets und Desktop-Computern zu bieten.
  2. In Bezug auf CSS:
    • In CSS wird der Viewport oft mit dem Begriff „viewport width“ (vw) und „viewport height“ (vh) in Verbindung gebracht. Diese Maßeinheiten sind relativ zur Größe des Viewports und ermöglichen es, Layouts dynamisch zu gestalten, die sich an die Bildschirmgröße des Benutzers anpassen.
    • Beispiel für den Viewport in CSS: body { width: 100vw; /* Breite des Viewports */ height: 100vh; /* Höhe des Viewports */ }
  3. In Bezug auf Meta-Tags:
    • Um den Viewport in mobilen Geräten richtig zu steuern, wird häufig das Meta-Tag viewport in den HTML-Code eingefügt. Es ermöglicht es, die Darstellung und das Verhalten der Seite auf mobilen Geräten zu optimieren, etwa durch die Kontrolle der Zoomstufe und der Skalierung.
    • Beispiel für ein Meta-Tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • width=device-width: Setzt die Breite des Viewports auf die Breite des Geräts.
      • initial-scale=1.0: Legt die anfängliche Zoomstufe auf 1 fest, sodass die Seite ohne Vergrößerung oder Verkleinerung angezeigt wird.
  4. In der Grafik und Videotechnologie:
    • In grafischen Anwendungen oder Videoplayern bezeichnet der Viewport den Bereich, in dem ein Bild oder Video angezeigt wird. Der Begriff wird verwendet, um die Region zu beschreiben, die das Endgerät oder der Benutzer sieht, während der Rest des Inhalts möglicherweise abgeschnitten oder verborgen ist.

Faktoren, die den Viewport beeinflussen:

  • Gerätegröße und Bildschirmauflösung: Der Viewport passt sich der Größe des Geräts und der Bildschirmauflösung an, sodass der Inhalt entweder skaliert oder umgeformt wird, um innerhalb des sichtbaren Bereichs zu passen.
  • Zoom und Skalierung: Benutzer können den Viewport mit Funktionen wie Zoom in mobilen Browsern oder über Browsereinstellungen anpassen. Das beeinflusst, wie der Inhalt innerhalb des Viewports angezeigt wird.
  • Fenstergröße: Auf Desktop-Computern wird der Viewport durch die Größe des Browserfensters definiert. Wenn der Benutzer das Fenster verkleinert oder vergrößert, ändert sich auch der Viewport.

Wichtige Konzepte im Zusammenhang mit dem Viewport:

  1. Responsive Design:
    • Webseiten und Apps sollten so entwickelt werden, dass sie sich dynamisch an verschiedene Viewport-Größen und -Orientierungen anpassen können (z. B. Hochformat oder Querformat auf mobilen Geräten).
  2. Viewport Meta-Tag:
    • Es sorgt dafür, dass Webseiten auf mobilen Geräten korrekt dargestellt werden und verhindert, dass die Benutzer in und aus der Seite zoomen müssen, was die Benutzererfahrung verbessern kann.
  3. Viewport-Einheiten:
    • vw (Viewport Width): 1vw ist 1% der Breite des Viewports.
    • vh (Viewport Height): 1vh ist 1% der Höhe des Viewports.

Fazit:

Der Viewport ist der sichtbare Bereich einer Webseite oder Anwendung auf dem Bildschirm des Benutzers. In der Webentwicklung ist es wichtig, den Viewport zu verstehen und ihn zu kontrollieren, um eine benutzerfreundliche und anpassungsfähige Erfahrung auf unterschiedlichen Geräten zu gewährleisten. Besonders durch das responsive Webdesign und die Verwendung des Viewport-Meta-Tags können Entwickler sicherstellen, dass ihre Webseiten auf allen Geräten gut aussehen und benutzerfreundlich sind.

Wir sind darum bemüht die angebotenen Informationen aktuell zu halten und diese in knapper und verständlicher Form darzustellen. Fehler und Irrtümer bleiben aber menschlich und darum vorbehalten. Bei Unstimmigkeiten zu einem Begriff, bitten wir darum dies per E-Mail mit uns zu diskutieren. Bitte nutze hierfür unsere E-Mail: info@jupiterexpress.de« Zurück zum Glossar Index