Lassan több mint két éves dologról beszélünk, mégis elkerülte a figyelmemet, a Large, Small és Dynamic Viewportok megjelenése.

A szokásos 100vh azaz 100 viewport height mellett ugyanis megjelent a böngészőkben újabb CSS tulajdonságok, amik alapvetően a mobilon lévő weboldalak megjelenéseit tudják segíteni, optimalizálni.

Large Viewport

Ezt használva arra a méretre nyúlik a viewport, ami kvázi a teljes felhasználható terület a böngészőben, akkor, amikor minden user interface (pl cím mező) eltűnik.

A mértékegységei tehát a lvh / dlw / lvmin / lvmax.

Small Viewport

Ezt használva arra a méretre nyúlik a viewport, ami kvázi a teljes felhasználható terület a böngészőben, akkor, amikor minden user interface (pl cím mező) nyitva van.

A mértékegységei tehát a svh / svw / svmin / svmax.

Dynamic Viewport

Könnyen kitalálható, hogy ezzel a beállítással a méretünk dinamikusan változik, attól függően, hogy a user interface elemek megjelennek, vagy eltűnnek. Az értéke 100lvh és 100svn között mozoghat.

A mértékegységek itt a dvh / dvw / dvmin / dvmax. Mielőtt nekiugoránk, hogy bakker, a dvh a legjobb opciónk, érdems utánanézni, tud megleptéseket és ui glitcheket okozni. helyette talán érdemesebb azsvh-t és a min-height-t kombinálni.

#hero {
  min-height: 100svh;
}