iPhone X to pierwszy smartfon Apple w którym zrezygnowano z fizycznego przycisku Home. Wymusiło to konieczność zmiany interfejsu iOS 11, ale zmiany będą musiały również pojawić się w sposobie projektowania stron www na iPhone X. Apple na stronie Webkit opublikowało już stosowne informacje odpowiednio przygotować stronę internetową do wyświetlania na iPDo popranego wyświetlania zawartości strony internetowej niezbędne będzie zmodyfikowanie kody HTML i CSS.
<meta name=’viewport’ content=’initial-scale=1, viewport-fit=cover’>
W kodzie HTML niezbędna jest modyfikacja tagu viewport do którego należy dodać tag viewport-fit="cover"
viewport-fit+”cover” umożliwia wykorzystanie całej przestrzeni ekranu
W CSS dodano funkcję constant() dzięki której przeglądarka będzie respektować bezpieczną przestrzeń do wyświetlania safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, oraz safe-area-inset-bottom. Przykładowa składnia CSS będzie wyglądać tak
.post {
padding: 12px;
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}
Bezpieczna przestrzeń do wyświetlania
Efektem wprowadzonych zmian będzie taki oto wygląd strony www na iPhone X. Trzeba przyznać, że wygląda to kiepsko i bardzo dobrze widać zmarnowaną przestrzeń. Pozostaje nadzieja, że web developerzy szybko wpadną na jakiś świetny pomysł jak rozwiązać ten problem.
Obstawiam, że początkowo wiele stron będzie miało problemy z poprawnym wyświetlaniem swojej zawartości na iPhone X. Część z nich prawdopodobnie nigdy nie zostanie zaktualizowana przez co będą bardzo niewygodne do przeglądania na najnowszym produkcie Apple. Szczególnie bym się obawiał o strony rządowe, tam zawsze mają problem przystosowaniem się do rzeczywistości.
Więcej informacji znajdziecie tutaj
KOMENTARZE