Neue CSS-Viewport-Units: `svh`, `lvh`, `dvh`

 (ishadeed.com)
21 Punkte von xguru 2023-07-14 | 4 Kommentare | Auf WhatsApp teilen
  • Das Festlegen auf Basis von Viewport-Breite/-Höhe ist praktisch, aber vh hat auf Mobilgeräten viele Bugs
    → weil die Viewport-Größe die Adressleisten-UI des Browsers nicht einschließt
  • 100vh sollte auf Mobilgeräten eigentlich der Höhe des gesamten Viewports entsprechen, aber in Safari/Chrome (Android), die die UI beim Scrollen ausblenden, entstehen Probleme
  • Deshalb hat die CSS Working Group die neuen Units svh, lvh, dvh eingeführt
    • svh Small Viewport: die Viewport-Höhe, wenn die Adressleisten-UI nicht verkleinert ist
    • lvh Large Viewport: die Viewport-Höhe, wenn die Adressleisten-UI verkleinert ist
    • dvh Dynamic Viewport: verändert sich dynamisch zwischen svh und lvh
  • Mit 100dvh lässt sich festlegen, dass ein Button am unteren Rand immer sichtbar bleibt
    • Allerdings kann es Performance-Probleme geben, daher ist Vorsicht geboten

Verwandte Beiträge

4 Kommentare

 
hided62 2023-07-19

Wow! In Firefox für Android gab es bei position:fixed, bottom: 0 einige Dinge, die schrecklich merkwürdig funktioniert haben — ich sollte mal prüfen, ob das jetzt behoben ist.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
iOS wird ab 15.4 unterstützt, Android ab 114.
 
tomriddle7 2023-07-14

Es gibt inzwischen so viele Viewport Units, dass es langsam verwirrend wird.
 
carnoxen 2023-07-14

Die Ironie dabei: Eigentlich ist das ein Problem, das der Browser lösen sollte, aber stattdessen übernimmt die Standardisierungsgruppe die Verantwortung ...