"background-size：cover"はモバイル画面をカバーしていません

Question

私のサイトには、background-size:coverという写真の背景があります。それはほとんどの部分で機能しますが、ポートレートモードでは私のGalaxy S3には〜30pxの空白が残っています。

スクリーンショットを添付しました。 1pxティールラインは、画面全体を示すものです。バックグラウンドがソーシャルメディアulの直後に停止したようです。

私はulを削除することによってこれをテストし、背景はそれをキャッチフレーズテキストの下に自己を添付。

また、ここではモバイル撮りビューを関連私のCSSです：

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

これが起こるが、私は別の問題を解決しようとしているときに、私は誤ってそれを盗聴推測ではないために使用。私はこれらのCSSルールが適用されるとは思わないので、

Answer 1

別のものを試してみると、の下にmin-height: 100%;を追加して、{ background:... }が働いてくれました。

Answer 2

ギャラクシーS3は、縦または横のビューのいずれかでより大きな480PXの幅をhavs。あなたは720pxを使用する必要があります。

追加してみてください。

* { background:transparent } 

権利を最後に、その後、あなたのhtml { background:... } CSSを移動&。

モバイルフッターのdivのか、そのビューをブロックし、邪魔になっている作成された他の要素があるかどうかを確認することができますこの方法です。

また、私はバックグラウンドCSSをHTMLではなく本体に適用しようとします。あなたは答えにもっと近づくことを願っています。

Answer 3

これは、Android 4.1.2とiOS 6.1.3（iPhone 4）とデスクトップ用のスイッチで動作します。応答性の高いサイト用。

念のために、あなたのHTMLの頭の中で、このような何か：

<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

現在のソリューションは、ビューポートの高さを使用することです（vh）であり、所望の高さを示す。 100％はモバイルChromeで動作しませんでした。 CSS：

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