Web-Entwicklung für das neue iPhone X

Zum 10. Jahrestag des iPhones bringt Apple passend dazu das iPhone X in neuen Design und mit neuen Features. Das iPhone X wird das erste iPhone mit randlosem OLED-Display in eine Größe von 5,8 Zoll sein und verfügt über ein TrueDepth Kamera und Sensoren, die Gesichtserkennung ermöglichen. Genau diese Feature könnte Designer und Entwickler eine Herausforderung bieten.

Bei der Entwicklung einer Website für das iPhone X sollte die ganze Bildschirmgröße in Querformat ausgenutzt werden. Dies wird durch das Setzen der „viewport-fit“ meta tag auf „cover“ (<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>) erreicht. Diese aber führt dazu, dass einige Elemente der Website durch die Kamera und die Sensoren zur Gesichtserkennung verdeckt werden.

Um dies zu umgehen wird von Apple empfohlen , die sog. safe area zu benutzen. Auf diese Wiese wird die Darstellung der Website nicht von der Sensoren, Kamera oder die abgerundete Ecken beeinträchtigt. Dazu wird eine neue CSS Funktion eingeführt: „constant()“ und vier vordefinierten Konstanten: „safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom“ . Die Funktion constant() könnte zum Beispiel in einem padding eingesetzt werden:

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

Mit diesen zwei Änderungen können Entwickler Websites so anpassen, dass sie am besten auf dem iPhone X dargestellt werden und müssen sich keine Gedanken machen, ob Elemente von der Sensoren zur Gesichtserkennung verdeckt werden.

Wir helfen Ihnen selbstverständlich gerne bei der Einrichtung Ihrer Website, Ihres Onlineshops oder auch Ihr Intranet! Sprechen Sie uns jetzt unverbindlich an!

Quellen:

https://9to5mac.com/2017/09/22/web-developer-tips-designing-for-iphone-x/

https://webkit.org/blog/7929/designing-websites-for-iphone-x/