Konfiguracje ekranu

Elastyczne projektowanie witryn pod wieloma względami stanowi reakcję na telefony komórkowe. Przed pojawieniem się smartfonów bardzo niewiele osób zastanawiało się nad tym, jak strony internetowe powinny wyglądać i działać na urządzeniach mobilnych. Zmieniło się to wraz z gwałtownym wzrostem liczby telefonów komórkowych z wbudowanymi przeglądarkami internetowymi.

Elastyczne projektowanie witryn promowało podejście kwestionujące założenia. Chociaż w przeszłości można było zakładać, że stronę będzie można wyświetlić tylko na komputerze, teraz projektowanie tej samej strony również na komórki i tablety jest standardową praktyką. Jak się okazuje, korzystanie z urządzeń mobilnych wyprzedziło teraz osoby korzystające z komputerów w internecie.

Takie podejście pomoże Ci w przyszłości. Twoje witryny będą wyświetlane na urządzeniach i ekranach, których nawet sobie dziś nie wyobrażamy. Ten sposób myślenia wykracza poza ekrany. Nawet teraz użytkownicy korzystają z urządzeń bez ekranów, by otwierać Twoje treści. Asystenci głosowi mogą korzystać z Twoich stron internetowych, jeśli dysponujesz solidnymi podstawami w zakresie semantycznego języka HTML.

Eksperymentowanie jest też możliwe w świecie ekranów. Obecnie na rynku są dostępne urządzenia składane. Wiąże się to z pewnymi wyzwaniami związanymi z projektowaniem.

Montaż składanych telefonów w różnych konfiguracjach.

Dwa ekrany

Użytkownicy urządzeń składanych mogą wybrać, czy przeglądarka ma zajmować tylko jeden z ekranów czy rozciągać się na oba ekrany. Jeśli przeglądarka obejmuje oba ekrany, wyświetlana witryna jest podzielona zawiasem między nimi. Nie wygląda to najlepiej.

Witryna na 2 ekranach Poziomy przepływ tekstu jest przerywany zawiasem między ekranami.

Segmenty widocznego obszaru

Jest dostępna eksperymentalna funkcja multimediów, która wykrywa, czy Twoja witryna wyświetla się na urządzeniu dwuekranowym. Proponowana nazwa obiektu multimedialnego to viewport-segments. Są 2 odmiany: horizontal-viewport-segments i vertical-viewport-segments.

Jeśli funkcja multimediów horizontal-viewport-segments zgłasza wartość 2, a vertical-viewport-segments podaje wartość 1, co oznacza, że zawias urządzenia działa z góry na dół, dzieląc treści na 2 panele obok siebie.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
 
// Styles for side-by-side screens.
}

Jeśli funkcja multimedialna vertical-viewport-segments zgłasza wartość 2, a horizontal-viewport-segments1, zawias biegnie z boku na boki, dzieląc zawartość na 2 panele, jeden nad drugim.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
 
// Styles for stacked screens.
}
Diagram przedstawiający segmenty widocznego obszaru.
. Schemat z serwisu Microsoft Edge Explainers.

Jeśli zarówno vertical-viewport-segments, jak i horizontal-viewport-segments podają wartość 1, oznacza to, że witryna wyświetla się tylko na jednym ekranie, nawet jeśli urządzenie ma więcej niż 1 ekran. Jest to równoważne z nieużywaniem zapytań o media.

Zmienne środowiskowe

Sama funkcja multimediów w viewport-segments nie pomoże Ci w projektowaniu wokół tego irytującego zawiasu. Potrzebujesz sposobu na określenie rozmiaru zawiasu. Z pomocą przydają się zmienne środowiskowe.

Zmienne środowiskowe w CSS pozwalają uwzględnić w stylach niezręczne elementy ingerencje urządzeń. Na przykład możesz projektować wokół „wycięcia”, na iPhonie X przy użyciu wartości środowiskowych safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom i safe-area-inset-left. Te słowa kluczowe znajdują się w ramach funkcji env().

body {
 
padding-top: env(safe-area-inset-top);
 
padding-right: env(safe-area-inset-right);
 
padding-bottom: env(safe-area-inset-bottom);
 
padding-left: env(safe-area-inset-left);
}

Zmienne środowiskowe działają jak właściwości niestandardowe. Oznacza to, że możesz przekazać opcję zastępczą, jeśli zmienna środowiskowa nie istnieje.

body {
 
padding-top: env(safe-area-inset-top, 1em);
 
padding-right: env(safe-area-inset-right, 1em);
 
padding-bottom: env(safe-area-inset-bottom, 1em);
 
padding-left: env(safe-area-inset-left, 1em);
}

Aby te zmienne środowiskowe działały na iPhonie X, zaktualizuj element meta, który określa informacje o viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Teraz układ strony zajmie cały widoczny obszar i bezpiecznie wypełni dokument za pomocą wstawionych wartości dostarczonych przez urządzenie.

W przypadku urządzeń składanych proponowane jest 6 nowych zmiennych środowiskowych: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom i viewport-segment-right.

.
Diagram przedstawiający zmienne środowiskowe dla dwóch ekranów.
. Schemat z serwisu Microsoft Edge Explainers.
.
.

Oto przykład układu z 2 kolumnami, z których jedna jest szersza niż druga.

@media (min-width: 45em) {
  main
{
   
display: flex;
   
flex-direction: row;
 
}
  main article
{
   
flex: 2;
 
}
  main aside
{
   
flex: 1;
 
}
}

Układ jest podzielony na 2 ekrany, a zawias zakłóca szerszą kolumnę.

W przypadku 2 ekranów z pionowym zawiasem ustaw szerokość pierwszego ekranu, a drugiej – szerokość drugiego ekranu.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article
{
   
flex: 1 1 env(viewport-segment-width 0 0);
 
}
  main aside
{
   
flex: 1;
 
}
}

Układ jest równomiernie podzielony na 2 ekrany bez widocznych zakłóceń.

Traktuj dwa ekrany jako szansę. Załóżmy, że na jednym z nich jest wyświetlana zawartość tekstowa, którą można przewijać, a druga – stały element, taki jak obraz lub mapa.

Schemat przedstawiający podział usługi lokalizacyjnej na 2 ekrany, z mapą na jednym z nich, a na drugim – ze wskazówkami.
Diagram Microsoft Edge Explainers.

Przyszłość

Czy składane ekrany staną się kolejnym wielkim przebojem? Kto wie. Nikt nie jest w stanie przewidzieć, jak popularne będą urządzenia mobilne, dlatego warto dobrze przemyśleć przyszłe formaty.

Przede wszystkim warto zadbać o to, by Twoje witryny były przygotowane na każdą przyszłość. Właśnie to daje Ci elastyczne projektowanie stron: nie tylko zestaw praktycznych technik, ale również sposób myślenia, który przyda się podczas tworzenia sieci jutra.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o konfiguracjach ekranu

Które zapytanie o multimedia jest kierowane na urządzenie składane w trybie podzielonego poziomego?

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)
@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)

Co to są zmienne środowiskowe? np. env(safe-area-inset-top)

Zmienne, które stały się zielone i są bezpieczniejsze dla środowiska.
Zmienne dotyczące pogody, w której przebywa użytkownik.
Niestandardowe zmienne czasu kompilacji.
Zmienne zawierające atrybuty związane z przeglądarką, które służą do dostosowywania witryny do danej przeglądarki i urządzenia.