728 x 90

Co zrobisz, żeby iPhone X dobrze wyświetlił Twoją stronę?

Co zrobisz, żeby iPhone X dobrze wyświetlił Twoją stronę?

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 hegemona.

Potem jednak pojawiła się spora konkurencja i przeglądarki zaczęły konkurować. Wynikiem tego była coraz większa zgodność ze standardami, a co za tym idzie 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.

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

O ile w pionie nie ma problemu, to w poziomie niestety już 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.

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?

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)

Od tej pory 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);
}

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!

Chciałbym się też dowiedzieć, czy macie zamiar dostosować swoje strony do wyświetlania na iPhone X…

Czy będziesz dostosowywał swoją stronę do iPhone X?

View Results

Loading ... Loading ...

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

Leave a Comment

Your email address will not be published. Required fields are marked with *

Cancel reply

Inne artykuły