NETPROFIT Werbeagentur Logo NETPROFIT Werbeagentur Logo
MNÜ

Lexikon Viewport

Definition Viewport

Ein Viewport ist ein Begriff aus dem Bereich des Webdesigns und der Webentwicklung. Er bezeichnet den sichtbaren Bereich eines Webseiteninhalts auf dem Bildschirm eines Geräts, wie zum Beispiel eines Computers, Tablets oder Smartphones.

Der Viewport bestimmt, welche Teile einer Webseite der Nutzer sehen kann.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

So sieht der HTML-Viewport auf dieser Webseite aus. Der Inhalt orientiert sich demnach an der verfügbaren Breite des genutzten Fensters und wird nicht skaliert.

Inhaltsübersicht
/files/dateien/bilder/lexikon/viewport/viewport-geraete.png

Relevanz Viewport und Responsive Design

Der Viewport spielt eine wesentliche Rolle im Kontext des Responsive Webdesigns, das darauf abzielt, Webseiten nicht nur auf PCs, sondern auch auf mobilen Geräten wie Handys oder Tablets optimal darzustellen. Hier ist die Verbindung zwischen Viewport und Responsive Design:

  • Im Responsive Design wird der Viewport genutzt, um den sichtbaren Bereich einer Webseite auf dem Bildschirm eines Geräts festzulegen.
  • Durch die Definition des Viewports kann die Webseite entsprechend der Bildschirmgröße und -ausrichtung des Geräts skaliert und angepasst werden.
  • Der Viewport-Meta-Tag im HTML-Code einer Webseite ermöglicht die Steuerung des Viewports und beeinflusst die Darstellung auf verschiedenen Geräten.
  • Ein gut konfigurierter Viewport trägt dazu bei, dass die Webseite auf mobilen Geräten optimal aussieht und sich gut bedienen lässt. Eine schlechte Viewport-Einstellung kann zu unerwünschtem Zoomen, Beschnitt von Inhalten oder anderen Problemen führen.
  • In Kombination mit Media Queries in CSS ermöglicht der Viewport das Erstellen von reaktionsfähigen Layouts, die je nach Bildschirmgröße unterschiedliche Stile und Anordnungen haben

Einstellungsmöglichkeiten Viewport 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width legt die Breite des Viewports fest. Diese kann durch Pixel festgelegt werden oder mit device-width die Breite des Endgeräts übernehmen.
  • initial-scale definiert den Zoomfaktor (0.1 - 10) beim Aufruf einer Webseite. Werte unter dem Standardwert 1 bedeuten eine Verkleinerung, Werte über 1 bedeuten eine Vergrößerung.

Weitere Einstellungsmöglichkeiten:

  • user-scalable legt fest, ob der Benutzer selbst scrollen kann. Die Voreinstellung ist "yes" und sollte aus Gründen der Barrierefreiheit nicht geändert werden.
  • minimum-scale: Kontrolliert, wie stark herausgezoomt werden kann (0.1 - 10). Werte über dem Standardwert von 0.1 verringern die Zoomfähigkeit.
  • maximum-scale: Kontrolliert, wie stark hinein werden kann (0.1 - 10). Werte unter dem Standardwert von 10 verringern die Zoomfähigkeit. Der Wert sollte nicht unter 3 sein.

Viewport Abgrenzung zu above the fold

Der Viewport und "Above the Fold" sind zwei Begriffe im Kontext des Webdesigns und der Darstellung von Webseiten. Obwohl sie miteinander verknüpft sind, beziehen sie sich auf unterschiedliche Aspekte:

  • Der Viewport bezieht sich auf den aktuellen sichtbaren Bereich einer Webseite auf dem Bildschirm, abhängig von Faktoren wie Bildschirmgröße, -orientierung und Zoom-Einstellungen. Der Webseiteninhalt ist dafür unerheblich. Auch nach dem Scrollen bleibt der Viewport erhalten.
  • "Above the Fold" bezieht sich auf den Inhalt einer Webseite, der sofort sichtbar ist, wenn die Seite geladen wird, ohne dass der Nutzer nach unten scrollen muss. Dieser Bereich befindet sich in der Regel am oberen Rand der Webseite.

FAQ Häufige Fragen zu Viewport

Was ist der Viewport im HTML Meta-Tag?

Der Viewport ist eine Einstellung, die im <meta>-Tag des HTML-Codes einer Webseite verwendet wird. Er definiert den sichtbaren Bereich der Webseite auf dem Bildschirm eines Geräts, wie z.B. die Breite und Skalierung. Dies beeinflusst, wie die Webseite auf verschiedenen Bildschirmgrößen und -orientierungen angezeigt wird, insbesondere im Kontext des Responsive-Webdesigns.

Wohin kommt der Viewport-Tag im HTML?

Der Viewport Meta-Tag wird im <head>-Bereich des HTML-Dokuments platziert.

Brauchen ich einen Viewport-Tag?

Nein, eine HTML-Seite benötigt nicht zwingend ein Viewport-Tag. Allerdings empfiehlt sich ein Viewport-Tag, um das Verhalten auf mobilen Endgeräten zu definieren und somit Responsive Design zu gewährleisten.

Quellen, weiterführende Links

Suche
Home
Anrufen
Kontakt
nach oben
insert coin
Katzen YouTube Thumbnail

Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.