Wycięcie w ekranie i viewport-fit=cover

Technologie webowe

Opublikowany: Aug 05, 2018

Pamiętam czasy, gdy trzeba było szalenie napracować się, aby wszystkie przeglądarki desktopowe dobrze wyświetlały tworzoną stronę internetową. Każdy z producentów implementował standardy według własnego widzimisię i nie zwracał uwagi na kompatybilność. Prym wiódł tu Internet Explorer Microsoftu, czującego się bezpiecznie na pozycji światowego lidera.

Potem jednak pojawiła się spora konkurencja i przeglądarki zaczęły dostosowywać się do standardów, co spowodowało coraz łatwiejsze tworzenie stron, działających dobrze na wszystkich urządzeniach. Na sprzętach mobilnych zaczął działać jeden wiodący silnik renderowania stron, co również ułatwiło ich tworzenie… a tu nagle pojawiają się telefony z dziwnymi wycięciami w ekranie… co oczywiście powoduje pewien problem. Dokładnie tak. Mam na myśli iPhone X 1. Ale nie tylko. Okazuje się, że przed X-em był One Plus 6 a po X-ie nastąpił dosłownie wysyp urządzeń z wycięciem, mimo że nie było one w żaden sposób uzasadnione!

Co zrobić, żeby strona była dobrze widoczna na ekranie o dziwnym kształcie?

O ile w pionie takie urządzenie wyświetla treści bardzo ładnie i nie ma problemu, to w poziomie niestety już ten problem występuje. Wiele stron wykorzystuje do prezentacji całą powierzchnię przeglądarki. W przypadku nowego telefonu Apple może być to problem, gdyż wycięcie w ekranie może zasłaniać część treści.

Apple postanowiło go rozwiązać, domyślnie dodając do strony paski po bokach.

f2-1024x593.jpg

Prawda, że pięknie?

Mamy jednak możliwość wymuszenia wyświetlenia strony na całym ekranie, dodając do silnika web-kit nowy meta-tag, który pozwoli na pominięcie bezpiecznych marginesów z obu stron ekranu.

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

Taka procedura pozwoli teraz cieszyć się wyświetlaniem strony na pełnym ekranie…. ale co z wycięciem?

f3-1024x613.jpg

Wycięcie teraz fragment strony. Żeby sobie z tym poradzić, musimy włączyć w iPhone tryb eksperymentalny (w symulatorze będzie to można zrobić w Ustawieniach: Safari > Advanced > Experimental features > Constant Properties)

SETTINGS-540x1024.jpg

Od tej pory w systemach < 11.2 możemy korzystać z funkcji constant() i korzystać z parametrów safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, i safe-area-inset-bottom, pozwalających na takie ustalenie rozmiarów i pozycji elementów, aby strona dopasowała się prawidłowo do ekranu. Oto przykład CSS 2

.post {
 padding: 12px;
 padding-left: constant(safe-area-inset-left);
 padding-right: constant(safe-area-inset-right);
}

W wersji 11.2 funkcja constant została zastąpiona zgodną ze standardem (czyli występującą we wszystkich webkitach funkcją env()).

Podsumowanie

iPhone X doda kilka minut do pracy każdego web developera. Ale chyba warto to zrobić, dla niedługo pewnie najbardziej popularnego urządzenia na świecie…

Tymczasem pamiętaj, że projektując strony, zawsze trzeba je przetestować przynajmniej na kilku różnych urządzeniach i przeglądarkach. I nigdy, ale to przenigdy nie projektuj strony tylko dla jednego urządzenia!


PRZYPISY

  1. Tak, wiem, że nie jest tak kolorowo i wciąż trzeba dbać o testowanie stron na wielu różnych urządzeniach, ale wygląda na to, że nowe pomysły różnych firm mogą spotęgować ten problem!
  2. maxrudberg.com
  3. swiftacademy.pl


Image
Felieton
Zarabianie Schrodingera
Sep 03, 2019
Image
Felieton
Rozliczanie aplikacji sprzedanych w AppStore
Jun 10, 2019
Image
Felieton
Cały internet na płycie CD
Apr 01, 2019
Image
Nauka programownia
Swift: O co chodzi z tymi kolejkami?
Feb 17, 2019
Image
Felieton
Tim Cook docenił wzrost sprzedaży w Polsce
Feb 04, 2019

Nasze szkolenia

Image
Image
Programowanie aplikacji iOS w Swift 5
Dwudniowe szkolenie od podstaw
Toruń - 2020-03-14
dr Błażej Zyglarski
Image
Image
Objective-C dla programistów Swift
Jednodniowe szkolenie dla programistów Swift
Warszawa - 2020-01-11
dr Błażej Zyglarski
Image
Image
Programowanie Gier 2D na iOS
Trzydniowe szkolenie ze SpriteKit i GameplayKit dla programistów Swift
Toruń - 2020-03-27
dr Błażej Zyglarski