Was ist Dynamische-Viewport-Einheiten-Generator?
Moderne CSS-Viewport-Einheiten gibt es in drei Varianten. Der kleine Viewport (svh) ist die Viewport-Höhe abzüglich der Browser-UI. Der große Viewport (lvh) ist die Viewport-Höhe mit eingezogener Browser-UI. Der dynamische Viewport (dvh) passt sich an, während die Browser-UI erscheint und verschwindet. Diese sind nützlich für vollflächige Layouts auf mobilen Geräten.
Kurze Antwort
Verwenden Sie dynamische Viewport-Einheiten (dvh, svh, lvh) für Layouts, die den mobilen Viewport korrekt ausfüllen müssen, wenn die Browser-UI ein- und ausblendet. Fügen Sie immer einen klassischen vh-Fallback für ältere Browser hinzu.
Last updated: 2026-06-11
Einschränkungen
- Dynamische Viewport-Einheiten sind nur auf mobilen Browsern relevant. Auf dem Desktop verhalten sich dvh, svh und lvh identisch zu vh.
- Einige Browser aktualisieren dvh erst am Ende des Scrollvorgangs, was zu einem sichtbaren Sprung in der Elementhöhe führen kann.
- Auf mobilen Browsern ändert sich dvh, wenn die Bildschirmtastatur erscheint. Formular-Inputs und Chat-Oberflächen, die dvh verwenden, können unerwartet die Größe ändern.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie den Einheitentyp: svh, lvh, dvh, svw, lvw oder dvw.
- Legen Sie einen Prozentwert für die Viewport-Einheit fest, z.B. 100 für die volle Höhe.
- Wählen Sie die CSS-Eigenschaft, auf die die Viewport-Einheit angewendet werden soll, wie min-height oder height.
- Kopieren Sie die CSS-Deklaration mit der modernen Einheit und einem klassischen vh-Fallback.
Wofür du es nutzen kannst
- Erstellen Sie einen Hero-Bereich, der auf mobilen Geräten den exakt sichtbaren Bildschirm ausfüllt.
- Verhindern Sie, dass Inhalte hinter der mobilen Browser-Symbolleiste versteckt werden.
- Bauen Sie vollflächige Panels, die sich an ändernde Viewport-Größen anpassen.