Duże, małe i dynamiczne jednostki widocznego obszaru

Nowe jednostki CSS, które uwzględniają widoczne obszary mobilne z dynamicznymi paskami narzędzi.

Bramus

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.

Jasnoniebieski element ustawiony na 100 vw na 100 Vh, który zajmuje cały widoczny obszar. Sam widoczny obszar jest oznaczony niebieskim ramką przerywaną.
Jasnoniebieski element o wartości 100 vw na 100 Vh i zajmujący 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ści vw lub vh.
  • vmax = większa wartość z vw lub vh.

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.

Sieć 100 Vh na urządzeniu mobilnym jest za duża po wczytaniu.
100 Vh na urządzeniu mobilnym jest za wysoki po wczytaniu.

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

Sygnał 100 vh na urządzeniu mobilnym jest „prawidłowy”, gdy wycofasz interfejsy klienta użytkownika.
Połączenie z internetem 100 vh na urządzeniach mobilnych jest prawidłowe, gdy interfejsy klienta użytkownika zostały wycofane.

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.
Wizualizacje dużych i małych widocznych obszarów.
Wizualizacje dużych i małych widocznych obszarów.

Do nowych widocznych obszarów są też przypisane jednostki:

  • Jednostki reprezentujące duży widoczny obszar mają prefiks lv. Jednostki to lvw, lvh, lvi, lvb, lvmin i lvmax.
  • Jednostki reprezentujące mały widoczny obszar mają prefiks sv. Jednostki to svw, svh, svi, svb, svmin i svmax.

Rozmiary tych jednostek wartości procentowej widocznego obszaru są stałe (a tym samym stałe), chyba że zmienisz rozmiar samego widocznego obszaru.

Dwie wizualizacje w przeglądarce mobilnej umieszczone obok siebie. Jeden zawiera element o rozmiarze 100 svh, a drugi 100 lvh.
Dwie wizualizacje w przeglądarce mobilnej umieszczone obok siebie.
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*.

100 dvh dostosowuje się do małego lub dużego widocznego obszaru.
100dvh dostosowuje się do dużego lub małego widocznego obszaru.

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: