Ich hab‘s noch nicht in der Realität gesehen bzw. nutzen können und kenne es nur von Fotos bzw. Apples eigener Selbstdarstellung. Aber dieses neue Display mit seinem Notch, der Teile der Inhalte abdeckt, ist ja wohl eine Fehlkonstruktion. Mal ganz abgesehen davon, dass ich den Notch für eine designmäßige Katastrophe halte, aber das mag Geschmacksache sein.
Muss man jetzt seine Webseiten auf diesen Notch hin optimieren oder ist das eine vorübergehende Angelegenheit? Und was ist, wenn Samsung demnächst mit einem Notch am anderen Rand kontert, muss man das dann auch berücksichtigen?
Ich finde es im Übrigen etwas verwirrend, dass das hier gar kein Thema ist - ich habe lediglich hier im deutschen Bereich einen einsamen Beitrag dazu gefunden
Eigentlich weigere ich mich, meine Kreativität und meine Arbeitskraft für einen derartigen Unsinn zu verpulvern. Aber vielleicht werde ich einfach zu alt für so etwas…
Das sollte für Webseiten kein Problem sein. Die Darstellung fängt m.E. darunter an, im Notch Bereich stehen die Anzeigen für den Netzdienst etc. Nur die Apps müssen daraufhin optimiert werden.
Ich sehe das auch für Webseiten als Problem an. Sicher, beiden Apps kollidiert der Notch oft mit Bedienelementen, aber auch bei Webseiten kann er ganz erheblich die Darstellung stören. Wobei ich das mangels iPhone X bislang noch nicht in der Praxis überprüfen konnte.
Aber wenn ich mir so etwas anschaue, graust es mir:
Safari spart den Notch tatsächlich aus? Muss mal schauen, dass ich mir dies mal auf einem X anschaue. Kaufen tue ich mir dieses überteuerte Ding sicher nicht
Solange Du nicht über die ganze Seite gehst, macht Safari das automatisch:
“Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing.”
und
"Using the Whole Screen
The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11.
The default value of viewport-fit is auto, which results in the automatic insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, our viewport meta tag now looks like this:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>
After reloading, the navigation bar looks much better, running from edge to edge. However, it is immediately clear why it is important to respect the system’s safe area insets: some of the page’s content is obscured by the device’s sensor housing, and the bottom navigation bar is very hard to use."
<p>Daher mache ich mir da jetzt keine Gedanken…</p>
Selbst wenn Safari von Haus aus die Website zusammenschiebt (wovon ich allein schon kein Freund bin), ist nicht gesagt dass die anderen Browser das auch machen. Zwar basiert in iOS alles auf Apples WebKitViewer (oder wie das Teil heißt), allerdings habe ich hier und da trotzdem schon unterschiedliches Verhalten der Browser bei diversen Elementen beobachten können…
Ich persönlich muss aber sagen, dass es mich am meisten stört, dass der ganze Spaß nur mittels sehr neuen oder gänzlich von Apple selbst kreierten CSS-Features halbwegs in ordentliche Bahnen zu schieben ist. Woraus wiederum folgt, dass man X verschiedene Stylesheets schreiben darf damit bspw. andere Browser in anderen Systemen keine Fehler casten oder ältere Browser, die man unterstützen muss, nicht gänzlich abschmieren. Und in meinem speziellen Fall wird mir auch der Sass-Compiler einen Haufen Fehler ausgeben weil er den ganzen Mist nicht kennt
Anyway, um zum Ausgangspunkt zurückzukommen würde ich persönlich das iPhone X am liebsten gänzlich ignorieren, aber da sich das wieder verkaufen wird wie geschnitten Brot (wenn man sich den Preisverfall des 8 inkl. Gründe dafür ansieht) wird das wohl nicht gehen.
Auf die automatische Anpassung würde ich mich nicht verlassen, weil bei den automatisch generierten Anpassungen meist nur Mist bei rauskommt. Meine Lösung wird dann wie folgt aussehen:
-> user agent abfragen + filtern (z.B.: preg_match('/iPhone…/', $_SERVER, $bingo); …je nachdem woran man das X am Ende eindeutig identifizieren kann)
-> custom stylesheet mit ein paar overwrites reinladen ODER das Stylesheet direkt in ein dynamisches umschreiben und wenn $bingo nicht leer ist andere Regeln reinladen. Ist am Ende deutlich performances als mit Späßen wie jQuery oder Modernizr was reißen zu wollen.
