Verwendung dynamischer Viewport-Einheiten

• Auf dem Desktop stellen vw und vh die Größe des Viewports gut dar
• Auf Mobilgeräten wird die Größe jedoch durch dynamisch eingeblendete UI wie Toolbar oder Adressleiste beeinflusst. Daher kann 100vh die Größe des Viewports überschreiten oder sich bei Scrollen, wenn die Adressleiste zusammenschrumpft, an die Viewport-Größe anpassen
• Die CSS Working Group stellt Einheiten bereit, die für solche dynamisch veränderlichen Größen verwendet werden können, sodass sie exakt der tatsächlichen Viewport-Größe entsprechen
  • Large viewport: lvh gilt, wenn keine dynamisch eingeblendete UI vorhanden ist
  • Small viewport: svh gilt, wenn eine zusammengeschrumpfte UI wieder erweitert wurde
  • Dynamic viewport: dvh entspricht der Viewport-Größe passend zum Zustand der dynamischen UI; unterstützt in Chrome 108, Firefox 101 und Safari 15.4