contexte-taille: la couverture ne fonctionne pas sur iOS
C'est mon code:
background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;
il fonctionne sur le bureau, iPad et Android mobile:
sur Chrome et Safari sur iPhone, le fond est trop grand:
5 réponses
cela se produit lorsque vous avez background-attachment:fixed . Sur mobile, je mets habituellement background-attachment:scroll à l'intérieur d'une requête @media .
comme @RyanKimber a fait remarquer , les images fixes ci-jointes utilisent la totalité de la taille <body> . Sur mobile cela peut devenir vraiment grand ce qui souffle votre image. Le fait de remettre la pièce jointe à scroll permet à votre image de couverture de s'étirer à l'intérieur de son propre contenant.
développement sur la réponse de Ryan, sans ajouter de nouveau html noeud ou en utilisant @media requêtes, en utilisant un seul css .
si vous voulez garder un
coverdimensionnéfixedarrière-plan sur tous les appareils, y compris iOS, sans ajouter un nouveau noeud, alors l'astuce est de faire le positionnement fixe sur l'élément (corps) lui-même et pas l'arrière-plan, car un arrière-plan fixe et la taille de la couverture fait foirer iOS.
il fonctionne dans la production comme un charme sur iOS aussi bien: https://www.doklist.com /
ce code ne fonctionnera pas, puisque iOS utilise la hauteur du document et non le viewport :
body {
background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
maintenant c'est la magie, le body:after est fixe, et pas le fond :
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}j'aurais pu utiliser le corps lui-même, avec" position:fixe;débordement-y:scroll", mais je ne voulais pas gâcher le positionnement du corps et mon agencement général.
donc faire cela sur le corps:après est une solution très facile. J'ai testé la solution sur Mac, et iOS avec firefox, safari, chrome.
j'ai aussi créé un GitHub repo avec 2 exemples pour ceci: https://github.com/thesved/fixed-cover-background
Cela m'a causé un certain nombre de problèmes. Le problème est que iOS utilise la pleine hauteur et la largeur du corps au lieu du viewport pour décider de la taille.
notre solution était de créer un nouveau <div class="backdrop"></div> .
nous appliquons l'arrière-plan à cette div et lui donnons la position: absolute; top: 0; bottom: 0; left: 0; right: 0.
puisque cette div est maintenant la taille du viewport, background-size: cover fonctionne très bien.
Ce post répond à vos questions: pourquoi est-CSS background-size: cover fonctionne pas en mode portrait, sur iOS?
tous les navigateurs ne reconnaissent pas le mot-clé cover Pour background-size, et par conséquent, il suffit de l'ignorer.
de sorte que nous pouvons surmonter cette limite en réglant la taille de l'arrière-plan à 100% de largeur ou de hauteur, selon l'orientation. Nous pouvons cibler l'orientation actuelle (ainsi que le dispositif iOS, en utilisant device-width). Avec ces deux points, je pense que vous pouvez utiliser CSS background-size:cover sur iOS en mode portrait
Voir ce post pour plus de ressources.
essayez ceci:
background: url( /gfx/background.jpg ) no-repeat top center fixed;
background-size: 100vmax 100vmax;
comme indiqué ci-dessus," couverture " couvrira la hauteur du document, pas la hauteur de vue. La plupart des unités ne fonctionnera pas comme prévu donc vmax.
Pas vraiment de couverture de, fait le travail avec des carrés des images :)