Viewport

Der Viewport ist der sichtbare Bereich einer Webseite oder Anwendung auf dem Bildschirm des Nutzers zu einem bestimmten Zeitpunkt. Auf einem Desktop-Computer entspricht der Viewport dem Browserfenster abzüglich Symbolleisten, Scrollleisten und Browser-Chrome. Auf Tablets und Smartphones ist der Viewport die gesamte Bildschirmfläche, die der Browser nutzen kann. Der Viewport bestimmt, wie Inhalte skaliert, angeordnet und dem Leser präsentiert werden. In HTML teilt das `<meta name="viewport">`-Tag dem Browser mit, wie er die Seitenabmessungen und Skalierung steuern soll — dies ist die Grundlage des [Responsive Designs](/glossary/responsive-design).

Inhalte, die Viewport-Unterschiede ignorieren, liefern auf bestimmten Geräten ein schlechtes Leseerlebnis. Text kann auf Telefonen unleserlich klein sein, Schaltflächen unmöglich zu tippen, oder es kann horizontales Scrollen erforderlich sein, um die gesamte Seite zu sehen. Da mobile Geräte inzwischen den Großteil des Web-Traffics ausmachen, verlieren Publikationen, die sich nicht an verschiedene Viewport-Größen anpassen, Leser und wirken unprofessionell. Suchmaschinen berücksichtigen Mobilfreundlichkeit auch im Ranking, sodass eine korrekte Viewport-Handhabung sowohl die Nutzererfahrung als auch die Auffindbarkeit beeinflusst.

FlipLink-Publikationen sind vollständig responsiv und passen sich automatisch an jede Viewport-Größe an. Der [Flipbook](/glossary/flipbook)-Viewer erkennt die verfügbaren Viewport-Abmessungen und passt das Seiten-Rendering, die Platzierung der Steuerelemente und die Zoomstufen entsprechend an. Auf breiten Desktop-Viewports werden Publikationen als [Doppelseiten-Spread](/glossary/page-spread) angezeigt. Auf schmalen mobilen Viewports wechseln sie zu einer Einzelseitenansicht mit Touch-freundlicher Navigation. Die Einstellungen für [Seitenerfahrung](/features/page-experience-and-layout) ermöglichen es Publishern, zwischen verschiedenen Layout-Modi zu wählen, und FlipLink übernimmt die Viewport-Berechnungen, um Inhalte stets lesbar und gut proportioniert zu halten. Wenn du ein Flipbook mit dem [responsiven Einbettungscode](/features/sharing-and-distribution) einbettest, füllt es automatisch seinen Container und reagiert auf Viewport-Änderungen — einschließlich Gerätedrehung — ohne zusätzliche Konfiguration.

Der Viewport wird durch das HTML-Meta-Tag `<meta name="viewport" content="width=device-width, initial-scale=1">` gesteuert. Dieses Tag weist den Browser an, die Seitenbreite gleich der Bildschirmbreite des Geräts zu setzen und mit 1-fachem Zoom zu starten. Ohne dieses Tag rendern mobile Browser Seiten mit einer virtuellen Breite von etwa 980 Pixeln und verkleinern dann das Ergebnis, sodass Text winzig und Interaktionen schwierig werden. Wichtige Viewport-Eigenschaften umfassen: - **width**: Legt die Viewport-Breite fest. `device-width` entspricht der tatsächlichen Bildschirmbreite in CSS-Pixeln. - **initial-scale**: Steuert die Zoomstufe beim ersten Laden der Seite. Ein Wert von `1` bedeutet keinen Zoom. - **maximum-scale** und **user-scalable**: Steuern, ob Nutzer per Pinch-to-Zoom zoomen können. Barrierefreiheitsrichtlinien empfehlen, Zoomen zu erlauben. - **viewport-fit**: Auf Geräten mit Notch oder abgerundeten Ecken erweitert `viewport-fit=cover` den Inhalt in den sicheren Bereich. CSS-Media-Queries verwenden Viewport-Abmessungen, um verschiedene Styles anzuwenden. Zum Beispiel zielt `@media (max-width: 768px)` auf Viewports, die schmaler als 768 CSS-Pixel sind — ein gängiger Breakpoint für den Übergang von Tablet zu Mobilgerät.

**„Viewport und Bildschirmauflösung sind dasselbe."** Das sind sie nicht. Ein Telefon kann eine Bildschirmauflösung von 1170 x 2532 physischen Pixeln haben, aber einen Viewport von 390 x 844 CSS-Pixeln. Das Device Pixel Ratio (DPR) überbrückt die Lücke — auf diesem Telefon beträgt das DPR 3, was bedeutet, dass jeder CSS-Pixel 9 physischen Pixeln entspricht. Designer arbeiten in CSS-Pixeln (dem Viewport), nicht in physischer Auflösung. **„Das Setzen von `user-scalable=no` verbessert das Erlebnis."** Das Verhindern von Zoom beeinträchtigt die Barrierefreiheit für Nutzer mit Seheinschränkungen. Moderne Webstandards und viele Barrierefreiheitsprüfungen kennzeichnen dies als Fehler. Der FlipLink-Viewer erlaubt standardmäßig Pinch-to-Zoom und bewahrt dabei die Layout-Integrität. **„Desktop-Viewport-Größen sind einheitlich."** Desktop-Viewports variieren stark. Ein Nutzer mit einem 27-Zoll-Monitor und geöffneten Browser-Entwicklertools kann einen Viewport von nur 900 Pixeln haben — das liegt bereits im Tablet-Bereich. Responsive Publikationen müssen sich an die tatsächlichen Viewport-Abmessungen anpassen, nicht an vermutete Gerätekategorien.

Der Viewport ist das Fenster, durch das Leser deine Inhalte sehen. Publikationen, die auf die Viewport-Größe reagieren, liefern ein konsistentes, professionelles Erlebnis auf jedem Gerät — vom 4-Zoll-Smartphone bis zum 32-Zoll-Desktop-Monitor — ohne dass der Leser die Anpassung jemals bemerkt.