18

を使用して自分のサイトに写真の背景がありますbackground-size:cover。ほとんどの部分で機能しますが、ポートレートモードのGalaxyS3に約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;
}

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

4

4 に答える 4

39

何時間もいろいろなことを試した後、下の底に追加するmin-height: 100%;ことは私のために働いた。html{ background:... }

于 2012-12-01T19:47:15.873 に答える
5

これは、Android4.1.2およびiOS6.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;
    }
}
于 2013-10-06T04:57:40.387 に答える
1

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

追加してみてください：

* { background:transparent }

html { background:... }最後にCSSを移動します。

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

また、HTMLではなくbodyにバックグラウンドCSSを適用してみます。あなたが答えに近づくことを願っています。

于 2012-12-01T12:12:39.990 に答える
0

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

background-size: cover;
min-height: 100%;
于 2016-09-05T19:32:44.643 に答える