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

Surmonter les limitations de Mobile Safari avec CSS background-size: cover

Dans le domaine du développement Web, il est souvent souhaitable d'avoir des images d'arrière-plan qui s'étire de manière transparente pour remplir tout le récipient. Bien que CSS propose la propriété background-size: cover à cet effet, cela pose un défi inattendu lorsqu'il s'agit d'appareils iOS.

Le problème

Lors de l'application de background- size : couvrez un div sur les appareils iOS, l'image d'arrière-plan ne parvient pas à couvrir toute la zone. Au lieu de cela, il conserve son rapport hauteur/largeur d'origine et est réduit, ce qui entraîne un désalignement entre l'image et le conteneur.

Solution

Le problème ne réside pas dans la taille de l'arrière-plan. : couverture mais avec le fond-pièce jointe : propriété fixe. Pour résoudre ce problème, une requête multimédia peut être utilisée pour remplacer le comportement des pièces jointes pour les appareils iPhone, permettant ainsi à l'image d'arrière-plan de défiler avec le contenu.

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

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

Dans cet exemple, @iphone-screen est un pré- variable définie qui représente la largeur d'écran maximale pour les appareils iPhone. En définissant background-attachment pour qu'il défile pour ces appareils, l'image d'arrière-plan couvrira désormais entièrement le conteneur, en s'adaptant aux différentes largeurs de fenêtre et à la taille du contenu.

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!