0

このような質問がここで尋ねられたことは知っていますが、既存の質問の多くには、現在では古くなっている回答があります。私が必要としているのは次のとおりです。固定された中央の背景画像を持つ、できれば CSS と HTML のみを含む Web ページ。私が使用している背景画像の寸法は 1024x1024 で、画像が横向きモードと縦向きモードで画面を覆うという考えがあります。背景画像も固定する必要があります。つまり、ページのコンテンツがスクロールされた場合、背景画像はコンテンツと共にスクロールしません。

私はほぼうまくいく解決策を持っています：

CSS:

#background {
    background-image: url('background.jpg');
    background-position:center; 
    background-repeat: no-repeat;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    z-index: 0; 
}

HTML:

<body>
    <div id="background"></div>
    <!-- content here -->
</body>

このソリューションは、ポートレート モードで正常に機能します。固定と中央揃えはどちらも正常に機能しています。しかし、iPadを横向きモードにすると、背景画像のサイズがすぐに変更されて新しい幅に収まりません。その代わりに、右側に白い縦縞が表示されます。コンテンツをスクロールすると、背景画像のサイズが変更され、幅が正しく埋められます。

ページのコンテンツがスクロールされたときにのみ背景のサイズ変更が行われる理由を知っている人はいますか?また、これを正しく機能させる方法を知っている人はいますか? 私はこれが iOS 5 で機能することにのみ興味があるので、答えは他のブラウザーや iOS 4 を考慮に入れる必要はありません。

4

1 に答える 1

3

私は助けることができると思います。私もモバイルデザインは初めてですが、モバイル Safari の空白の問題にすぐに遭遇しました...

CSS プロパティを 100% で、または背景画像のサイズをピクセル単位で使用してみてmin-widthくださいmin-height。これにより、ビューポート (空白をレンダリングするもの) が背景画像のサイズに一貫して準拠するようになります (横向きと縦向き)。

さらに、margin: 0HTML または BODY 要素に適用することもできます。

それがうまくいくことを願っています！

PS HTML でこのタグも必要になる場合があります。

<meta name="viewport" content="width=device-width">

しかし、繰り返しますが、私はこれに慣れていないので、必要かどうかはわかりません。

于 2012-10-31T08:06:05.020 に答える