"background-size: cover" non copre lo schermo mobile

Question

Ho uno sfondo di foto sul mio sito utilizzando background-size:cover. Funziona per la maggior parte, ma lascia uno strano spazio bianco di ~ 30px sul mio Galaxy S3 in modalità verticale.

Ho allegato uno screenshot. La linea verde acqua 1px è per illustrare l'intero schermo. Sembra che lo sfondo si interrompa subito dopo il social media ul s.

Ho provato questo rimuovendo lo ul e lo sfondo allegato esso auto nella parte inferiore del testo della tagline.

Inoltre, ecco il mio CSS pertinenza vista portait cellulare:

@media only screen and (max-width: 480px) { 

.logo { 
    position: relative; 
    background-size:70%; 
    -webkit-background-size: 70%; 
    -moz-background-size: 70%; 
    -o-background-size: 70%; 
    margin-top: 30px; 
} 

h1 { 
    margin-top: -25px; 
    font-size: 21px; 
    line-height: 21px; 
    margin-bottom: 15px; 
} 

h2 { 
    font-size: 35px; 
    line-height: 35px; 
} 

.footer_mobile { 
    display: block; 
    margin-top: 20px; 
    margin-bottom: 0px; 
} 

li { 
    display: block; 
    font-size: 1.3em; 
} 

Questa era non accade, ma immagino per sbaglio ho spiati mentre cercando di risolvere un altro problema.

Answer 1

Dopo ore di tentativi diversi, aggiungere min-height: 100%; nella parte inferiore di html sotto lo { background:... } ha funzionato per me.

Answer 2

Galaxy S3 ha una larghezza superiore a 480px in verticale o in orizzontale, quindi non credo che verranno applicate le regole CSS. Dovrai usare 720px.

Prova aggiuntivo:

* { background:transparent } 

proprio alla fine & spostare il html { background:... } CSS dopo.

In questo modo è possibile vedere se c'è un div footer mobile o qualsiasi altro elemento che si sta intromettendo, bloccando la vista.

Inoltre, proverei ad applicare lo sfondo CSS al corpo piuttosto che HTML. Spero ti avvicini alla risposta.

Answer 3

Questo funziona su Android 4.1.2 e iOS 6.1.3 (iPhone 4) e switch per desktop. Scritto per siti reattivi.

Solo nel caso, nella tua testa HTML, qualcosa di simile:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

HTML:

<div class="html-mobile-background"></div> 

CSS:

html { 
    /* Whatever you want */ 
} 
.html-mobile-background { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 125%; /* To compensate for mobile browser address bar space */ 
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%; 
} 

@media (min-width: 600px) { 
    html { 
     background: url(/images/bg.jpg) no-repeat center center fixed; 
     background-size: cover; 
    } 
    .html-mobile-background { 
     display: none; 
    } 
} 

Answer 4

soluzione attuale sarebbe quella di utilizzare il livello di viewport (vh) per indicare l'altezza desiderata. Il 100% non ha funzionato con Mobile Chrome. CSS:

background-size: cover; 
min-height: 100%;