Elastyczne projektowanie witryn w różny sposób spotkało się z reakcjami użytkowników telefonów komórkowych. Zanim powstały smartfony, niewiele osób zastanawiało się nad tym, jak powinny wyglądać i działać strony internetowe na urządzeniach mobilnych. To się zmieniło wraz ze wzrostem liczby telefonów komórkowych z wbudowanymi przeglądarkami.
Elastyczne projektowanie witryn zachęcało do postaw kwestionujących założenia. Kiedyś wydawało się, że stronę internetową można wyświetlić tylko na komputerze, ale obecnie jest to standardowa praktyka w zakresie projektowania tej samej witryny również na telefony i tablety. Jak się okazuje, korzystanie z urządzeń mobilnych wyprzedziło teraz korzystanie z komputerów w internecie.
Takie podejście pomoże Ci w przyszłości. Całkiem możliwe, że Twoje witryny będą wyświetlane na urządzeniach i ekranach, których dziś nie sobie wyobrażamy. Ten sposób myślenia wykracza poza ekrany. Nawet teraz użytkownicy korzystają z urządzeń bez ekranów, aby uzyskać dostęp do Twoich treści. Asystenci głosowi mogą korzystać z Twoich stron, jeśli korzystasz z mocnych podstaw semantycznego kodu HTML.
Eksperymentowanie jest także możliwe w świecie ekranów. Obecnie na rynku jest dostępnych urządzeń ze składanymi ekranami. Wiąże się to z pewnymi wyzwaniami związanymi z projektowaniem.
Podwójny ekran
Użytkownicy urządzeń składanych mogą wybrać, czy przeglądarka ma zajmować tylko jeden ekran czy oba ekrany. Jeśli przeglądarka obejmuje oba ekrany, wyświetlana witryna zostanie podzielona według zawiasu między nimi. Nie wygląda to zbyt dobrze.
Segmenty widocznego obszaru
Oferujemy eksperymentalną funkcję multimediów służącą do wykrywania, czy witryna wyświetla się na urządzeniu z dwoma ekranami. Proponowana nazwa funkcji multimedialnej to viewport-segments. Istnieją 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 zgłasza wartość 1, oznacza to, że zawias urządzenia biegnie od góry do dołu, 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 multimediów vertical-viewport-segments zgłasza wartość 2, a horizontal-viewport-segments podaje wartość 1, zawias biegnie na boki, dzieląc zawartość na 2 panele, jeden na 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 strona wyświetla się tylko na jednym ekranie, nawet jeśli urządzenie ma więcej niż 1 ekran. Jest to równoznaczne z nieużywaniem zapytań o media.
Zmienne środowiskowe
Sama funkcja multimediów viewport-segments nie ułatwi Ci projektowania pod kątem tego irytującego zawiasu. Musisz znać rozmiar zawiasu. Pomocne mogą tu być zmienne środowiskowe.
Zmienne środowiskowe w CSS pozwalają uwzględnić w stylach niezręczną ingerencję urządzenia. Możesz go np. zaprojektować wokół „wycięcia” na iPhonie X, korzystając z wartości środowiskowych safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom i safe-area-inset-left. Te słowa kluczowe są zawarte w 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 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 wartościami wstawionymi z urządzenia.
W przypadku ekranów składanych proponowanych 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 od drugiej.
@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 w pierwszej kolumnie szerokość pierwszego ekranu, a w 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;
}
}
Potraktuj korzystanie z podwójnych ekranów jako możliwości. Jeden ekran może posłużyć do wyświetlania przewijanej treści tekstowej, a drugi jako element stały, taki jak obraz lub mapa.
Przyszłość
Czy składane ekrany to kolejny wielki sukces? Kto wie. Nikt nie był w stanie przewidzieć, jak popularne staną się urządzenia mobilne, dlatego warto spokojnie myśleć o przyszłych formatach urządzeń.
Przede wszystkim warto upewnić się, że Twoje witryny są w stanie dostosować swoje witryny do przyszłych zmian. Właśnie to zapewnia projektowanie responsywne: nie tylko zestaw praktycznych technik, ale także sposób myślenia, który pomoże Ci stworzyć sieć przyszłości.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o konfiguracjach ekranu
Które zapytanie o multimedia jest kierowane na urządzenie składane w trybie podzielonego ekranu 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: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)Co to są zmienne środowiskowe? Np. env(safe-area-inset-top)