0

http://i.stack.imgur.com/5oaN0.jpg请在此处参考此链接，其中包含有关我在做什么的图表。

这是我目前正在做的一个网站。所以基本上，你有一个菜单和 4 个内容区域，当你按下菜单上的按钮时，jquery animate() 函数会为 scrolltop 和 scrollleft 设置动画以查看内容区域。

对于内容区域后面的大背景（5k x 5k 像素），我使用 css 背景。但是，它在 pc 上的 chrome、android 上的 firefox 上显示，但在 ipad 上的 chrome 或 safari 上不显示。它只是显示一个空白背景。但是，当我不使用背景 css 并在 html 中使用 img 标签时，它会显示。

怎么了？我研究了这个问题并读到苹果有一些文档说明他们只能加载小于 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 回答