FROM CACHE - de_header

Farbe neben Notch IOS Geräte

KneadMe
Neues Mitglied
5 0 0

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)

2972FBA8-7D40-4F2B-9D6B-703815ADD239.jpeg

1 ANTWORT 1
Gabe
Shopify Staff
Shopify Staff
14420 2266 3453

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!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog