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.
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 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
- 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!
- maxrudberg.com
- swiftacademy.pl
