Nowe jednostki CSS, które uwzględniają widoczne obszary mobilne z dynamicznymi paskami narzędzi.
widoczny obszar i jego jednostki,
Aby dopasować rozmiar do wysokości widocznego obszaru, możesz użyć jednostek vw
i vh
.
vw
= 1% szerokości widocznego obszaru.vh
= 1% wysokości widocznego obszaru.
Nadaj elementowi szerokość 100vw
i wysokość 100vh
, a pokryje on cały widoczny obszar.

Sam widoczny obszar jest oznaczony niebieskim ramką przerywaną.
Jednostki vw
i vh
trafiły do przeglądarek z tymi dodatkowymi jednostkami
vi
= 1% rozmiaru osi wbudowanej widocznego obszaru.vb
= 1% rozmiaru osi bryły widocznego obszaru.vmin
= mniejsza z wartościvw
lubvh
.vmax
= większa wartość zvw
lubvh
.
Takie jednostki mają dobrą obsługę przeglądarek.
Obsługa przeglądarek
- 20
- 12
- 19
- 6
Zapotrzebowanie na nowe jednostki widocznego obszaru
Dotychczasowe jednostki reklamowe dobrze się sprawdzają na komputerach, ale w przypadku komórek wygląda to inaczej. Na rozmiar widocznego obszaru wpływa obecność lub brak dynamicznych pasków narzędzi. Są to interfejsy użytkownika, takie jak paski adresu i kart.
Mimo że rozmiar widocznego obszaru może się zmienić, rozmiary vw
i vh
się nie zmieniają. W związku z tym elementy o wysokości 100vh
będą wylewane poza widoczny obszar.

Te dynamiczne paski narzędzi zostaną wycofane podczas przewijania w dół. W tym stanie elementy o wysokości 100vh
obejmą cały widoczny obszar.

Aby rozwiązać ten problem, różne stany widocznego obszaru zostały określone przez grupę roboczą usługi porównywania cen.
- Duży widoczny obszar: rozmiar widocznego obszaru przy założeniu, że wszystkie interfejsy UA dynamicznie się rozwijają i wysuwają w celu wycofania.
- Mały widoczny obszar: rozmiar widocznego obszaru przy założeniu, że każdy interfejs UA jest dynamicznie rozwijany i wysuwany.

Do nowych widocznych obszarów są też przypisane jednostki:
- Jednostki reprezentujące duży widoczny obszar mają prefiks
lv
. Jednostki tolvw
,lvh
,lvi
,lvb
,lvmin
ilvmax
. - Jednostki reprezentujące mały widoczny obszar mają prefiks
sv
. Jednostki tosvw
,svh
,svi
,svb
,svmin
isvmax
.
Rozmiary tych jednostek wartości procentowej widocznego obszaru są stałe (a tym samym stałe), chyba że zmienisz rozmiar samego widocznego obszaru.

Jedna z nich ma element o rozmiarze 100 svh, a drugi 100 lvh.
Oprócz dużych i małych widocznych obszarów dostępny jest też dynamiczny widoczny obszar, który dynamicznie uwzględnia interfejs UA:
- Po rozwinięciu dynamicznych pasków narzędzi dynamiczny widoczny obszar jest równy rozmiarowi małego widocznego obszaru.
- Gdy dynamiczne paski narzędzi są wycofywane, jego rozmiar jest równy rozmiarowi dużego widocznego obszaru.
Towarzyszące jednostki mają prefiks dv
: dvw
, dvh
, dvi
, dvb
, dvmin
i dvmax
. Ich rozmiary są ograniczone między odpowiednikami lv*
i sv*
.

Te jednostki są dostarczane w Chrome 108 oraz oprócz tych, które są już obsługiwane, w przeglądarkach Safari i Firefox.
Obsługa przeglądarek
- 108
- 108
- 101
- 15,4
Zastrzeżenia
Pamiętaj o kilku kwestiach dotyczących jednostek widocznego obszaru:
Żadna z jednostek widocznego obszaru nie uwzględnia rozmiaru pasków przewijania. W systemach z włączonymi klasycznymi paskami przewijania element o rozmiarze
100vw
będzie więc trochę za szeroki. Jest to zgodne ze specyfikacją.Wartości dynamicznego widocznego obszaru nie są aktualizowane przy 60 kl./s. We wszystkich przeglądarkach aktualizacja jest ograniczana podczas rozwijania lub wycofywania interfejsu UA. Niektóre przeglądarki całkowicie blokują aktualizację w zależności od użytego gestu (powolne przewijanie lub przesunięcie).
Klawiatura ekranowa (nazywana też klawiaturą wirtualną) nie jest częścią interfejsu UA. Nie ma więc wpływu na rozmiar jednostek widocznego obszaru. W Chrome możesz wyrazić zgodę na działanie, w którym obecność klawiatury wirtualnej wpływa na jednostki widocznego obszaru.
Dodatkowe materiały
Aby dowiedzieć się więcej o widocznych obszarach i jednostkach, obejrzyj ten odcinek HTTP 203. W nim Bramus opowiada Jake'owi o różnych widocznych obszarach i wyjaśnia, jak dokładnie są określane ich rozmiary.
Dodatkowe materiały do przeczytania: