Questo è il mio codice:background-size: la copertura non funziona su iOS
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;
E 'di lavoro sul desktop, iPad e dispositivi Android:
Su Chrome e Safari su iPhone, lo sfondo è troppo grande:
Questo post risponde alle tue domande: why does CSS background-size: cover not work in portrait mode on iOS?
Non tutti i browser riconoscono la parola chiave di copertina per dimensioni di sfondo e, di conseguenza, semplicemente ignorarlo.
Così possiamo superare questa limitazione impostando la dimensione dello sfondo al 100% di larghezza o altezza, a seconda dell'orientamento. Possiamo indirizzare l'orientamento corrente (così come il dispositivo iOS, usando la larghezza del dispositivo). Con questi due punti penso che sia possibile utilizzare CSS background-size: cover su iOS in modalità portrait
Vedere quel post per ulteriori risorse.
Questo mi ha causato anche un certo numero di problemi. Il problema è che iOS sta utilizzando l'intera altezza della larghezza del corpo, anziché la finestra, per decidere la dimensione.
La nostra soluzione era creare un nuovo <div class="backdrop"></div>.
Applichiamo lo sfondo a questo div e lo diamo posizione: assoluto; inizio: 0; fondo: 0; a sinistra: 0; a destra: 0.
Poiché questo div è ora la dimensione del viewport, background-size: cover funziona correttamente.
Ciò accade quando si dispone di background-attachment:fixed. Sul cellulare, di solito inserisco background-attachment:scroll all'interno di una query @media.
Come @RyanKimber pointed out, le immagini fisse montate utilizzano l'intera dimensione <body>. Sul cellulare questo può diventare davvero alto e questo fa esplodere la tua immagine. Impostando nuovamente l'allegato su scroll, l'immagine di copertina si allungherà all'interno del proprio contenitore.
Davvero semplice e carino! Ha funzionato per me! – shimatai
Quando si imposta la larghezza massima, non dimenticare di considerare il dispositivo mobile con orientamento orizzontale, altrimenti la query multimediale non si innescherà quando è in orizzontale e avrai lo stesso problema. – andydavies
Se si desidera una soluzione senza query @media, quindi vedere la mia risposta di seguito con un corpo semplice: dopo la regola CSS e nessun nodo html aggiuntivo: http://stackoverflow.com/a/43058483/7765675 –
Elaborando risposta di Ryan, senza aggiungere alcuna nuova html nodo o utilizzando @media query, utilizzando un solo css.
Se si desidera mantenere un dimensioni
fixedsfondocoversu tutti i dispositivi, tra cui iOS, senza l'aggiunta di un nuovo nodo, quindi il trucco è quello di fare il posizionamento fisso sull'elemento (corpo) sé e non la sfondo, dal momento che uno sfondo fisso e un ridimensionamento della copertura incasina iOS.
Funziona in produzione come un fascino su iOS così: https://www.doklist.com/
Questo codice non funziona, dal momento che iOS utilizza l'altezza del document e non il 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;
}
Ora questa è la magia, il body:after è fisso e lo non è lo
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;
}avrei potuto usare il corpo stessa, con "position: fixed; trabocco-y: scroll", ma non ho voglia di pasticciare con il posizionamento del corpo e il mio layout generale .
Così facendo sul corpo : dopo è una soluzione molto semplice. Ho testato la soluzione su Mac e iOS con Firefox, Safari, Chrome.
Ho anche creato un repo github con 2 esempi di questo: https://github.com/thesved/fixed-cover-background
Appare il corpo: dopo che la soluzione {...} funziona perfettamente. Ho appena provato su browser. Ottima soluzione! – Ken
Dopo aver provato tonnellate di altre soluzioni presunte, questo funziona perfettamente su desktop e mobile! Grazie Viktor! – KernelSanders
Funziona anche per me! –
La
'' soluzione lavorato per me da Ryan e la risposta di Roko. Tuttavia, invece di aggiungere 'position: absolute' al blocco CSS, ho aggiunto questa riga in basso e ho funzionato alla grande:> min-height: 100vh; –