Pourquoi « background-size: cover » échoue-t-il sur Mobile Safari et comment y remédier ?

Surmonter les limites de la taille de l'arrière-plan : couverture dans Mobile Safari

Les appareils iOS présentent un défi unique lorsqu'il s'agit de mettre en œuvre des images d'arrière-plan qui couvrir des éléments entiers en utilisant background-size: cover. Malgré le comportement attendu, cette propriété donne souvent des résultats indésirables sur ces plateformes.

Pour résoudre ce problème, une solution de contournement astucieuse a émergé. En ajustant la propriété background-attachment pour faire défiler une requête multimédia ciblant spécifiquement les iPhones, le comportement problématique peut être corrigé.

Voici une version mise à jour du code fourni :

.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;
  }
}

En incluant cette requête multimédia, la propriété background-attachment est définie pour défiler uniquement pour les appareils dont la largeur est inférieure ou égale à la variable prédéfinie @iphone-screen. Cela garantit que les images d'arrière-plan se comportent comme prévu sur les iPhones tout en conservant leur position fixe sur des écrans plus grands.

Cette solution offre un moyen simple et élégant de gérer ce problème courant, vous permettant de créer des images d'arrière-plan transparentes sur toute la largeur. sur tous les appareils, y compris iOS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!