iPhone X und neue Stylsheets für Websites!

Kaum ist das Jubiläums-iPhone X angekündigt, gibt es auch schon erste ToDos, die uns Entwickler beschäftigen werden! Webseiten, die mit Hintergrundfarben arbeiten, können betroffen sein, und auf dem iPhone X im „Querformat“ unschön aussehen!

Der neue Viewport braucht einen CSS-Fix und dem Header muss man mitteilen, dass man den Viewport anpassen möchte, damit alles wieder gut funktioniert:

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

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

Danke an Stephen: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

Und so soll z.B. unsere spreeatelier-Website mobil im Landsacape-Mode im iPhone X aussehen.