0

http://i.stack.imgur.com/5oaN0.jpgこのリンクを参照して、私が何をしているかについての図を参照してください。

現在やっているサイトです。基本的に、メニューと 4 つのコンテンツ領域があり、メニューのボタンを押すと、jquery animate() 関数がスクロールトップとスクロールレフトをアニメーション化してコンテンツ領域を表示します。

コンテンツ領域の背後にある大きな背景 (5k x 5k ピクセル) には、css 背景を使用しています。ただし、pc の chrome、android の firefox では表示されますが、ipad の chrome や safari では表示されません。空白の背景が表示されるだけです。ただし、バックグラウンド css を使用せず、代わりに表示される html で img タグを使用すると。

なにが問題ですか？この問題について調べたところ、Apple が 3 メガピクセル (3*1024*1024) 未満の jpgs GIF しかロードできないと述べているドキュメントがあることを読みました。バックグラウンドcssで表示するにはどうすればよいですか?

私の背景のファイル形式はpngです（私もjpgを試しましたが、同じ結果です）

body {
margin: 0px;
border: 0px;
padding: 0px;
width: 5100px;
height: 5100px;
background-image: url("../images/main/overallBG.jpg");
background-repeat: no-repeat;
overflow: hidden; }
4

1 に答える 1

0

ネイティブ アプリの場合、Apple は、1024x1024 を超える画像は避け、より小さな画像に分割する必要があると述べています。ここで問題となるのは、ディスク上のファイル サイズではなく、メモリ内のサイズです。画像をデコードして、「フラットな」表現に変換する必要があります。

では、計算してみましょう: イメージが 5000x5000 ピクセルで、8 ビット RGB であると仮定します。これは、各ピクセルが 3 バイトを占めることを意味します。

5,000 * 5,000 * 3 = 75,000,000 (roughly 71.5 MiB)

そのため、一見小さな画像でも、メモリがすぐにいっぱいになってしまいます。iOS は、メモリが不足している場合、画像全体であるか、何もない場合でも、パーツを破棄できなくなりました。

唯一の解決策は、画像を小さな部分に分解することです。その後、iOS はメモリから表示されなくなった画像を削除できます (すべての部分が常に表示されているような巨大な画像では疑問です)。

jpeg を扱いやすいチャンクに分割し、css3 マジックを使用してそれらをすべてバックグラウンドにマージすることができます。

たとえば、高さ 7400 ピクセルの背景を 2048 ピクセルのチャンクに分割し、これらをまとめて配置します。

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg');
background-position: center 0px, center 2048px, center 4096px, center 6144px;
background-size: auto auto;
background-repeat: no-repeat;

これは、フル解像度で iPad に読み込まれます。

于 2013-08-12T19:34:40.650 に答える