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.