"पृष्ठभूमि आकार: कवर" मोबाइल स्क्रीन को कवर नहीं करता

Question

मेरे पास background-size:cover का उपयोग करके मेरी साइट पर एक फोटो पृष्ठभूमि है। यह अधिकांश भाग के लिए काम करता है लेकिन पोर्ट्रेट मोड में मेरे गैलेक्सी एस 3 पर एक अजीब ~ 30 पीएक्स सफेद जगह छोड़ देता है।

मैंने एक स्क्रीनशॉट संलग्न किया है। 1 पीएक्स टील लाइन पूरी स्क्रीन को चित्रित करना है। ऐसा लगता है कि सोशल मीडिया ul एस के ठीक बाद पृष्ठभूमि बंद हो जाती है।

मैंने ul को हटाकर इसका परीक्षण किया और पृष्ठभूमि ने टैगलाइन टेक्स्ट के नीचे स्वयं को संलग्न किया।

इसके अलावा, यहां मेरी सीएसएस मोबाइल portait दृश्य संबंधित है:

@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; 
} 

यह ऐसा नहीं करते थे, लेकिन मुझे लगता है मैं गलती से इसे bugged एक और समस्या को हल करने का प्रयास करेगा।

Answer 1

अलग अलग बातें की कोशिश कर के घंटे के बाद, { background:... } तहत html की तह तक min-height: 100%; जोड़ने मेरे लिए काम किया।

Answer 2

गैलेक्सी एस 3 पोर्ट्रेट या लैंडस्केप व्यू में 480px से अधिक की चौड़ाई है, इसलिए मुझे नहीं लगता कि उन सीएसएस नियम लागू होंगे। आपको 720 पीएक्स का उपयोग करने की आवश्यकता होगी।

कोशिश ऐड:

* { background:transparent } 

सही अंत में उस के बाद अपने html { background:... } सीएसएस के लिए कदम &।

इस तरह आप देख सकते हैं कि कोई मोबाइल फ़ूटर div या आपके द्वारा बनाए गए किसी भी अन्य तत्व को दृश्य को अवरुद्ध कर रहा है।

इसके अलावा मैं HTML के बजाय पृष्ठभूमि में पृष्ठभूमि सीएसएस को लागू करने का प्रयास करूंगा। आशा है कि आप जवाब के करीब आ जाएंगे।

Answer 3

यह एंड्रॉइड 4.1.2 और आईओएस 6.1.3 (आईफोन 4) पर काम करता है और डेस्कटॉप के लिए स्विच करता है। उत्तरदायी साइटों के लिए लिखा है।

शायद ज़रुरत पड़े, अपने HTML सिर में, कुछ इस तरह:

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

HTML:

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

सीएसएस:

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

वर्तमान समाधान व्यूपोर्ट ऊंचाई का उपयोग किया जाएगा (vh) वांछित ऊंचाई इंगित करने के लिए। मोबाइल क्रोम के लिए 100% काम नहीं किया। सीएसएस:

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