Wie behebt man Probleme mit der Hintergrundgröße: Cover in Mobile Safari?

CSS-Hintergrundgröße: Cover-Ersatz für Mobile Safari

Das unerwartete Verhalten von Mobile Safari in Bezug auf die CSS-Eigenschaft „Hintergrundgröße: Cover“ hat zum Problem geführt Bedarf an einer alternativen Lösung. Dieses Problem äußert sich darin, dass Bilder ihre jeweiligen Divs auf iOS-Geräten nicht vollständig abdecken.

Lösung:

Um dieses Problem zu beheben, ist es notwendig, den standardmäßigen Hintergrundanhang zu überschreiben : feste Eigenschaft auf mobilen Geräten. Durch das Festlegen von „background-attachment“ zum Scrollen in einer Medienabfrage, die auf iPhones abzielt, erhält das Hintergrundbild sein gewünschtes Verhalten zurück:

.section {
  background-size: cover;
  background-attachment: scroll; /* Override fixed attachment */
}

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

Hinweis: Es wird erwartet, dass die Variable @iphone-screen vordefiniert ist.

Durch die Implementierung dieser Lösung decken Hintergrundbilder nahtlos das gesamte Div ab, unabhängig von seiner Breite oder der Höhe seines Inhalts. Die Eigenschaft „background-size: cover“ funktioniert jetzt wie vorgesehen und bietet ein konsistentes und optisch ansprechendes Erlebnis auf Mobile Safari.

Das obige ist der detaillierte Inhalt vonWie behebt man Probleme mit der Hintergrundgröße: Cover in Mobile Safari?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!