Comment résoudre les problèmes de taille d'arrière-plan : problèmes de couverture sur Safari mobile ?

CSS Background-Size : remplacement de la couverture pour Mobile Safari

Le comportement inattendu de Mobile Safari concernant la propriété CSS background-size: cover a incité le nécessité d'une solution alternative. Ce problème se manifeste lorsque les images ne couvrent pas entièrement leurs divs respectifs sur les appareils iOS.

Solution :

Pour résoudre ce problème, il est nécessaire de remplacer la pièce jointe d'arrière-plan par défaut. : propriété fixe sur appareils mobiles. En définissant background-attachment pour qu'il défile dans une requête multimédia ciblant les iPhones, l'image d'arrière-plan retrouve son comportement souhaité :

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

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

Remarque : la variable @iphone-screen devrait être prédéfinie.

En implémentant cette solution, les images d'arrière-plan couvriront de manière transparente l'intégralité du div, quelle que soit sa largeur ou la hauteur de son contenu. La propriété background-size: cover fonctionne désormais comme prévu, offrant une expérience cohérente et visuellement attrayante sur Mobile Safari.

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!