Farbe neben Notch IOS Geräte

[KneadMe]

Hey Leute,

Ich habe einen Shopify-Store und möchte, dass die Farbe neben der Notch nicht weiß ist, sondern die Farbe des Headers annimmt, ohne die Farbe des Headers selbst zu ändern. Gibt es Codes oder andere Möglichkeiten, dies zu erreichen?
Ich habe schon vieles mit ChatGbt probiert aber vergeblich. Ich benutze den Sense-Theme 9.0.0

Danke euch schonmal im Vorraus(also hoffentlich haha)

 

[Gabe]

Hey @KneadMe 

Danke für das Bild aber da sieht man nicht genau was "Farbe neben der Notch nicht weiß ist" bedeutet.

Das iPhone X von Apple hat einen Bildschirm, der die gesamte Oberfläche des Telefons bedeckt, mit Ausnahme einer "Kerbe", die Platz für die Kamera und andere Komponenten bietet. Daraus ergeben sich einige unangenehme Situationen für das Screendesign, z. B. die Beschränkung von Websites auf einen "sicheren Bereich" und weiße Balken an den Rändern. Es ist aber kein großer Trick, sie zu entfernen, eine Hintergrundfarbe auf dem Körper reicht aus. Oder du kannst deinen Shop auf den gesamten Bereich ausdehnen, indem du viewport-fit=cover zu deinem Meta-Viewport-Tag hinzufügst (von der Kerbe ganz zu schweigen).

Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! Füge eine CSS zu deinem Theme hinzu:

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

Dann liegt es an dir, die Überschneidungen zu berücksichtigen, die normalerweise durch den geschützten Bereich abgedeckt werden. Es gibt ein neues CSS, das dir dabei hilft, dies zu berücksichtigen.

Aus Stephen Radford documents genommen:

In order to handle any adjustment that may be required iOS 11’s version of Safari includes some constants that can be used when viewport-fit=cover is being used.

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-left
• safe-area-inset-bottom

This can be added to margin, padding, or absolute position values such a top or left.

I added the following to the main container on the website.

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

Update: Als das iPhone X auf den Markt kam, verwendete es constant() anstelle von env(), aber seit Version 11.2 wurde constant() zugunsten des standardisierten env() entfernt.

Du kannst das mit einer CSS Programmierung erreichen, das wird aber nicht ganz einfach sein wie du selber bereits mit ChatGPT schon erfahren hast. 

Siehe mehr zu diesem Thema hier.

Bitte beachte auch, dass wenn du es selber auf deiner Landingpage programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!