Wat is Dynamische Viewport Units Generator?
Moderne CSS-viewport-eenheden bestaan in drie varianten. svh is de viewporthoogte minus de browser-UI. lvh is de viewporthoogte met de browser-UI ingetrokken. dvh past zich aan terwijl de browser-UI verschijnt en verdwijnt. Nuttig voor volledige-scherm layouts op mobiel.
Snel antwoord
Gebruik dynamische viewport-eenheden (dvh, svh, lvh) voor layouts die de mobiele viewport correct moeten vullen. Voeg een klassieke vh-terugval toe voor oudere browsers.
Last updated: 2026-06-11
Beperkingen
- Alleen relevant op mobiel. Op desktop identiek aan vh.
- Sommige browsers werken dvh bij aan het einde van scrollen, niet continu.
- Dvh verandert wanneer het toetsenbord verschijnt, wat lay-outs met formuliervelden kan verstoren.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies het eenheidstype: svh, lvh, dvh, svw, lvw of dvw.
- Stel een percentagewaarde in zoals 100 voor volledige hoogte.
- Kies de CSS-eigenschap zoals min-height of height.
- Kopieer de declaratie met de moderne eenheid en een vh-terugval.
Waarvoor je het kunt gebruiken
- Maak een hero-sectie die het exacte zichtbare scherm vult op mobiel.
- Voorkom dat inhoud verborgen wordt achter de mobiele browserwerkbalk.
- Bouw panelen die zich aanpassen aan veranderende viewportgroottes.