CSS-Tools

Dynamische-Viewport-Einheiten-Generator

Generiere CSS mit dynamischen Viewport-Einheiten (dvh, svh, lvh) mit Fallbacks.

Tool wird geladen...

Was ist Dynamische-Viewport-Einheiten-Generator?

Dynamische-Viewport-Einheiten-Generator ist ein Browser-Tool für diese Aufgabe: Generiere CSS mit dynamischen Viewport-Einheiten (dvh, svh, lvh) mit Fallbacks. Die Ausgabe bleibt lesbar, damit du sie vor dem Einbau in eine Live-Seite prüfen kannst.

Quick answer

Use dynamic viewport units (dvh, svh, lvh) for layouts that need to fill the mobile viewport correctly when the browser UI expands and retracts. Always include a classic vh fallback for older browsers.

Limitations

  • Dynamic viewport units are only relevant on mobile browsers where the address bar and other UI elements expand and retract. On desktop, dvh, svh, and lvh behave identically to vh.
  • Some browsers update dvh on scroll end rather than continuously, which may cause a visible jump in element height as the address bar retracts.

So nutzt du dieses Tool

  1. Öffne das Tool und trage die relevanten Werte ein.
  2. Prüfe die erzeugte Ausgabe im Ergebnisfeld.
  3. Kopiere nur den Teil, der zu deiner Seite passt.
  4. Teste die Änderung im Browser, bevor du sie veröffentlichst.

Wofür du es nutzen kannst

  • Wiederkehrende Publishing-Aufgaben schneller erledigen.
  • Markup, CSS oder Checklisten vor einem Launch vorbereiten.
  • Kleine Fehler vermeiden, die bei statischen Websites leicht übersehen werden.

Haufige Fehler

  • Ausgabe ungepruft in Produktion kopieren.
  • Lokale URLs statt finaler öffentlich erreichbarer URLs verwenden.
  • Nach dem Build nicht prüfen, ob die Datei im veröffentlichten Ordner liegt.

Verification

  1. Load the page on a mobile device or emulator and scroll to confirm the element height adjusts correctly as the browser address bar retracts.
  2. Test with the browser UI both expanded and retracted to verify svh and lvh values produce the expected visible area.

FAQ

Fragen zu Dynamische-Viewport-Einheiten-Generator

Lauft Dynamische-Viewport-Einheiten-Generator lokal im Browser?

Ja. Die aktuellen Tools sind auf Browserausgabe und kopierbare Ergebnisse ausgelegt.

Muss ich die Ausgabe testen?

Ja. Prüfe die Ausgabe immer in deinem eigenen Template, Browser und Hosting-Setup.

Verwandte Tools

Weitere css-tools

Auch ausprobieren

Auch ausprobieren