jQuery Reel（360视图） - 仅在iPad上模糊

Question

我一直在尝试复制iPad上的360度视图，这些视图会随着手指的触摸事件而旋转。到目前为止，我已经成功创建它（只是复制了一些代码来开始，我使用的是jQuery Reel插件）。但是，只有当我将图像加载到iPad上时，图像才会显得模糊不清。

http://findthetechguy.com/ipadtest3/

然而，当我测试我在iPad上复制的原始网站时，卷轴更加清晰，图像也很高。

http://www.evoximages.com/products/360-exterior-spin

是什么原因导致我的图片仅在iPad上降低质量？它似乎在我的笔记本电脑上正常工作。任何帮助都会很棒。

Answer 1

iOS对内存中的资源大小施加限制（请参阅Safari Web Content Guide的“了解iOS资源限制”一章），导致卷轴的已知问题（请参阅FAQ）。 Safari所做的是缩小图像，使其适合系统专用于每个资源的小块内存，并以这种方式显示。这会导致不同（较低）的图像尺寸，并使Reel尝试使用图像精灵脱轨。为了解决这个问题，Reel使用-webkit-background-size CSS指令来强制执行原始维度，以便更改帧以使其正常工作，这就是因为iPad上的图像看起来模糊不清 - 您的图像已被调整大小系统然后由Reel备份。

当违反此iOS限制时，您唯一的选择是不使用一个精灵图像并使用具有.reel()的{​​{3}}选项的单独帧图像，该选项接受一系列路径到这些图片。