0

1024x1024ピクセルの背景画像があります。これらの寸法の理由は、横向きモードと縦向きモードの両方で画像が画面を覆うようにするためです。画像の中央に小さなロゴがありますが、それ以外は単純なグラデーションです。画像を常に中央に配置したい。つまり、ロゴは常に画面の中央に、横向きと縦向きで配置する必要があります。画面全体を覆う画像も必要ですが、背景画像で不要なスクロールバーが作成されることは望ましくありません。そのため、画面上で画像をドラッグして画像を移動できるようにしたくありません。

これが私が試したことです（そしてこの例のために、私はHTMLでスタイルタグを使用しています）：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<title>Test</title>
<style>
    html,body {
        width:100%;
        height:100%;
    }
    body {
        background-image: url('../img/background.jpg');
        background-position:center;
        background-attachment:fixed;
        background-repeat:no-repeat;
    }
</style>
</head>
<body>
Hello world.        
</body>
</html>

ここでのコードの問題は、画像が中央に配置されていないことです（縦向きモードでは、ロゴは画面の右側に表示され、横向きでは画面下部に表示されます）。また、背景画像がページコンテンツの一部になるため、スクロールバーが発生し、画像を左右にドラッグできるようになります。

私はCSSとhtmlだけのソリューションを好みますが、それが機能する場合はJavascriptを使用したソリューションを受け入れます。ここでは他のブラウザに関連する問題については言及しないでください。この質問では、モバイルSafariについて具体的に質問しています。私はさまざまな回答で行われた提案をたくさん試しましたが、MobileSafariで正しく機能する解決策をまだ見つけていません。

だからここに私の要件が再びポイント形式であります：

  • 背景画像は常に画面全体を覆っています（空白は表示されません）
  • 画像は常に中央に配置されます（したがって、オーバーフローは左右/上下に均等に分割されます）
  • iPadを横向きと縦向きの間で回転させても、画像は中央に留まります
  • 背景画像は固定されています（移動できません）
  • できればHTMLとCSSだけを使用したソリューション（CSS3も問題ありません）

Anwyoneはこれがどのように行われるか知っていますか？

アップデート：

この問題は、コンピューターと椅子の間にある可能性があります。;）UIWebviewで問題を整理したら、更新を投稿します。

Ok。確認済みです。ここには何も見えません！:)この問題はすべて私自身が行っていたものであり、私が提供したHTMLは実際には正しく機能します。ロードされているHTMLがエラー画面であり、エラー状況を「偽造」しようとすると、準備が整う前にUIWebviewがロードされたという実際のエラーが発生したため、これはうまくいきませんでした。正しいタイミングでHTMLをロードすると、中央揃えが突然機能し、スクロールバーが消えます。すべて100％。

4

1 に答える 1

3

背景画像には高さと幅がありません。それらの高さと幅は、それらが適用される親の高さと幅に依存します。そのため、背景画像でスクロールバーを作成することはできません。

画面サイズに応じて背景画像のサイズを変更する場合は、次を使用します。

background-size: cover;
于 2012-06-26T17:10:42.987 に答える