Zasada 09
Viewport, który mówi prawdę
Mobilna przeglądarka chowa pasek adresu przy przewijaniu, więc klasyczne 100vh opisuje ekran, którego przez większość czasu nie ma, a przycisk przyklejony do dołu ląduje pod paskiem. Jednostki dvh, svh i lvh nazywają każdy z tych stanów wprost, a env(safe-area-inset) pilnuje notcha i paska gestów.
Przycisk przyklejony do dołu, którego nie widać
Obie makiety to ekran telefonu z paskiem adresu przeglądarki. Strona po lewej ma wysokość 100vh, czyli ekranu bez paska, więc dopóki pasek jest widoczny, przycisk zapisu tkwi pod nim. 100dvh mierzy to, co naprawdę zostało.
✕ height: 100vh
Edycja profilu
✓ height: 100dvh
Edycja profilu
Prawdziwa przeglądarka chowa pasek dopiero przy przewijaniu, więc widok otwarty na 100vh wita użytkownika uciętym przyciskiem. dvh podąża za zmianą, svh mierzy stan z widocznym paskiem, lvh stan bez niego.
Reguły
- Pełna wysokość to 100dvh, a dla treści, która musi być widoczna zawsze, 100svh, nigdy gołe 100vh.
- Krawędzie ekranu szanują env(safe-area-inset-*), zwłaszcza dolny pasek gestów i notch.
- 100vw nie nadaje się na szerokość treści, bo nie odlicza pionowego scrollbara: szerokość bierze się z kontenera.
- Klawiatura ekranowa nie zasłania aktywnego pola: widok korzysta z dvh i scroll-padding zamiast zgadywać wysokości.
Wzorzec w kodzie
.ekran-startowy {
min-height: 100dvh;
}
.hero-zawsze-w-calosci {
height: 100svh;
}<meta
name="viewport"
content="width=device-width, initial-scale=1,
viewport-fit=cover,
interactive-widget=resizes-content"
/>
.pasek-akcji {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}