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

pracownia.pl

Edycja profilu

✓ height: 100dvh

pracownia.pl

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

dvh podąża za przeglądarką, svh gwarantuje widoczność

.ekran-startowy {
  min-height: 100dvh;
}

.hero-zawsze-w-calosci {
  height: 100svh;
}

Notch, pasek gestów i klawiatura ekranowa

<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));
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zastosuj w moim projekcie zasadę „Viewport, który mówi prawdę" z metodologii Liquid Design.

100vh kłamie na telefonie: pasek adresu przychodzi i odchodzi. Jednostki dvh i svh oraz safe-area mierzą ekran taki, jaki jest.

Wymagania:
- 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.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/viewport