Warum schlägt „background-size: cover“ in Mobile Safari fehl und wie lässt sich das Problem beheben?

Überwindung der Einschränkungen der Hintergrundgröße: Cover in Mobile Safari

iOS-Geräte stellen eine einzigartige Herausforderung dar, wenn es darum geht, Hintergrundbilder zu implementieren Decken Sie ganze Elemente mit „background-size: cover“ ab. Trotz des erwarteten Verhaltens führt diese Eigenschaft auf diesen Plattformen häufig zu unerwünschten Ergebnissen.

Um dieses Problem zu beheben, wurde eine clevere Problemumgehung entwickelt. Durch Anpassen der Eigenschaft „Hintergrundanhang“ zum Scrollen innerhalb einer Medienabfrage, die speziell auf iPhones abzielt, kann das problematische Verhalten korrigiert werden.

Hier ist eine aktualisierte Version des bereitgestellten Codes:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Durch Einschließen Bei dieser Medienabfrage ist die Eigenschaft „background-attachment“ so eingestellt, dass nur für Geräte gescrollt wird, deren Breite kleiner oder gleich der vordefinierten @iphone-screen-Variable ist. Dadurch wird sichergestellt, dass sich die Hintergrundbilder auf iPhones wie erwartet verhalten, während sie auf größeren Bildschirmen ihre feste Position beibehalten.

Diese Lösung bietet eine einfache und elegante Möglichkeit, dieses häufige Problem zu lösen und ermöglicht Ihnen die Erstellung nahtloser Hintergrundbilder in voller Breite auf allen Geräten, einschließlich iOS.

Das obige ist der detaillierte Inhalt vonWarum schlägt „background-size: cover“ in Mobile Safari fehl und wie lässt sich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!