web-dev-qa-db-ja.com

「背景サイズ：カバー」はモバイル画面をカバーしません

私のサイトにはbackground-size:coverを使用して写真の背景があります。それはほとんどの部分で機能しますが、縦長モードのGalaxy S3に約30pxの奇妙な空白を残します。

スクリーンショットを添付しました。 1pxティール線は、画面全体を示すためのものです。ソーシャルメディアulsの直後に背景が停止したようです。

ulと背景をタグラインテキストの下部に貼り付けて、これをテストしました。

problem screenshot

また、モバイルCSSに関する私の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;
}

これは以前は起こりませんでしたが、別の問題を解決しようとしているときに誤ってバグを犯したと思います。

htmlbackgroundmedia-queriescss
16
Vitaliy G.

さまざまなことを何時間も試した後、min-height: 100%;の下のhtmlの下に{ background:... }は私のために働きました。

37
Vitaliy G.

これは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;
    }
}
4
bit-less

Galaxy S3の幅は縦向きでも横向きでも480pxを超えるため、これらのCSSルールは適用されないと思います。 720pxを使用する必要があります。

追加してみてください：

* { background:transparent }

右端に移動してhtml { background:... }その後のCSS。

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

また、HTMLではなく背景のCSSを本文に適用してみます。あなたが答えに近づくことを願っています。

1
Francis Kim

現在の解決策は、ビューポートの高さ（vh）を使用して目的の高さを示すことです。 100％はモバイルChromeでは機能しませんでした。 CSS：

background-size: cover;
min-height: 100%;
0
Mika Vatanen