Warum schlägt „background-size: cover' in Mobile Safari fehl und wie kann man das Problem beheben?

Überwindung der Einschränkungen von Mobile Safari mit CSS-Hintergrundgröße: cover

Im Bereich der Webentwicklung ist es oft wünschenswert, Hintergrundbilder zu haben nahtlos dehnen, um den gesamten Behälter zu füllen. Während CSS für diesen Zweck die Eigenschaft „background-size: cover“ anbietet, stellt dies eine unerwartete Herausforderung dar, wenn es um iOS-Geräte geht.

Das Problem

Beim Anwenden von Hintergrund- Größe: Auf iOS-Geräten deckt das Hintergrundbild nicht den gesamten Bereich ab. Stattdessen behält es sein ursprüngliches Seitenverhältnis bei und verkleinert es, was zu einer Fehlausrichtung zwischen dem Bild und dem Container führt.

Lösung

Das Problem liegt nicht in der Hintergrundgröße : Cover, aber mit dem Hintergrundanhang: feste Eigenschaft. Um dieses Problem zu lösen, kann eine Medienabfrage verwendet werden, um das Anhangverhalten für iPhone-Geräte zu überschreiben, sodass das Hintergrundbild mit dem Inhalt scrollen kann.

.section {
  ...
  background-attachment: fixed;
  background-position: center center;
}

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

In diesem Beispiel ist @iphone-screen ein Vor- definierte Variable, die die maximale Bildschirmbreite für iPhone-Geräte darstellt. Durch die Einstellung des Hintergrundanhangs auf Scrollen für diese Geräte deckt das Hintergrundbild nun den Container vollständig ab und passt sich der unterschiedlichen Breite des Ansichtsfensters und der Inhaltsgröße an.

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