perché la dimensione dello sfondo CSS: cover non funziona in modalità verticale su iOS?

Question

Sto provando a impostare un manuale splash-image su tutti i dispositivi. Lo faccio controllando per orientation (dispositivi touch) o screen width vs. screen height (nessuno tocco) e imposta un url di conseguenza.

poi aggiungo questa regola CSS tramite JavaScript:

document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0) 

Con x essendo l'immagine da caricare a seconda dell'orientamento e delle dimensioni dello schermo.

Il mio problema è che funziona bene nella modalità landscape, ma sul mio iPad nella modalità portrait, l'immagine corretta viene caricata (differisce in base al ritratto/paesaggio), MA non è espansa a schermo intero.

Domanda:
non posso usare i CSS background-size su iOS in portrait-mode?

Grazie per l'aiuto!

MODIFICA:
Appena provato sul mio smartphone Android. Funziona bene lì. Non ha senso, perché non funziona su iPad.

Answer 1

Durante il controllo l'orientamento si prega di prendere nota di questi punti dal documento di mele -

fornire immagini di avvio:

iPhone applicazioni solo può avere una sola immagine lancio. Dovrebbe essere in formato PNG e misurare 320 x 480 pixel. Assegna un nome all'immagine di avvio file Default.png.

Applicazioni solo per iPad: Creare un'immagine di avvio per ciascun orientamento supportato nel formato PNG. Ogni immagine di lancio deve essere 1024 x 748 pixel (per orizzontale) o 768 x 1004 pixel (per verticale).

Applicazioni universali: Includi immagini di avvio per iPhone e iPad.

aggiornare le impostazioni Info.plist valori specificati per le UISupportedInterfaceOrientations e UIInterfaceOrientation

e

Non tutti i browser riconoscono la parola copertura per background-size, e di conseguenza , semplicemente ignoralo.

Quindi possiamo superare questa limitazione impostando il background-size a larghezza o altezza 100%, a seconda dell'orientamento. Possiamo indirizzare l'orientamento corrente (così come il dispositivo iOS, usando la larghezza del dispositivo).Con questi due punti credo che è possibile utilizzare i CSS background-size:cover su iOS in portrait-mode

Qui ci sono alcune altre risorse anche io sono imbattuto durante la ricerca di una soluzione: Flexible scalable background images, full scalable background images, perfect scalable background images e this discussione.

Answer 2

Ok. Ecco come funziona (Grazie a @iMeMyself):

body { 
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    } 

Quindi primo set a 100%, poi a cover. In questo modo tutti i browser che non possono ottenere cover ottengono il valore 100%, mentre quelli che possono ottenere il 100% vengono sovrascritti dalla copertina.

Answer 3

codice qui

E fissare le immagini di sfondo per ipad

basta inserire la dimensione in base alle proprie Dimensioni immagine

/* Page background-image landscape for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image portrait for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image landscape for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    } 
} 
/* Page background-image portrait for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 5024px 2024px !important; 
    background-size: 5024px 2024px !important; 
    } 
} 

Answer 4

Per quanto io sappia, questo metodo funziona su tutti Dispositivi IOS. A seconda degli altri elementi della pagina (intestazione, ecc.) Potrebbe essere necessario regolare z-index per &: prima di psuedo-element.

html { 
    height:100% !important; 
} 

body { 
    height:100%; 
    min-height:100%; 
    overflow-x:hidden; 
    overflow-y:auto; 
    // use your own class here // 
    &.body-class { 
     // @screen-xs-max is a Bootstrap3 variable name // 
     @media screen and (max-width:@screen-xs-max) { 
      min-height:100vh; 
      position:relative; 
      &:before { 
       position:fixed; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0; 
       display:block; 
       content:""; 
       z-index:-1; 
       background-image:url(background-image.jpg); 
       background-position:center; 
       background-size:cover; 
       // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes // 
       -webkit-background-size:cover; 
      } 
     } 
    } 
} 

Answer 5

Secondo Designing Websites for iPhone X iOS 11 introduce una nuova estensione per l'esistente viewport meta tag chiamato viewport-fit, che consente di controllare il comportamento insetting. L'impostazione predefinita è auto, che non coprirà l'intero schermo.

Per disabilitare il comportamento predefinito inserto e causare la pagina per lay out fino alla dimensione dello schermo, è possibile impostare viewport-fit-cover come illustrato di seguito:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 

Senza questa impostazione tecniche esistenti utilizzati per gli splash screen e le immagini di eroi a grandezza naturale potrebbero non essere visualizzati come previsto su iPhone X o altri dispositivi iOS conformi.