0

jQM に基づくモバイル Web アプリケーションがあります。次のスタイルが適用された背景画像があります。

body.ui-mobile-viewport .ui-page
{
    background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
     background-size: cover;
}

問題は、これは iOS、Chrome for Android では問題なく動作しますが、ICS ネイティブ ブラウザと Dolphin ブラウザでは、スクロールが開始された後、背景が次のようにページの上部に固定されます。

ページのスクロールについて

何らかのアクション (要素をタップするなど) の後、背景は次のようにフォーカスされた状態に戻ります。

○エレメントのタップ

私はインターネットでチェックし、広範な調査を行いましたが、明らかに何かが欠けています. これらは私が試したソリューションのリンクです：

一番上に表示されるもの (つまり CSS) は、適用されたデフォルトの編集されていないスタイルです。

注:超サイズのプラグインも 試してみましたが、GingerBread デバイスで、ページのコンテンツが静的な場合に機能します。ICS デバイスでは、動的コンテンツを含むページにビューポートを適用すると、ビューポートを超えてスクロールできません。画像が配置されているパスに設定してimgページの本文にタグを作成しようとすると、同じ問題が発生します。src

これらの問題は、ICS ネイティブ ブラウザでのみ発生します。

私が何か間違ったことをしている場合は教えてください。これに対する純粋な CSS ソリューションはありますか? (明らかに何かが大きく間違っている)

4

2 に答える 2

0

これを試して：

body.ui-mobile-viewport .ui-page
{
 background: url('images/bg-texture.jpg') no-repeat fixed left bottom; 
 background-size: cover;
}
于 2012-11-05T09:58:55.177 に答える
0

「html」の次の CSS は、Android デバイスでのページ全体の背景画像に関する問題を解決します。

html{
    height:100%;
    width:100%
}

body{
    background-image:url(img/background.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    }

それが役立つことを願っています。

于 2015-08-08T09:32:35.273 に答える