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.

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.

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-segments – 1, 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.
}

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.

.

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

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

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.

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