Question

我有一个混合的iPad应用程序在webview中加载html和javascript。

所有图像在ipads 1和2中都可以，但在ipads 3中是模糊的。

我正在考虑一些可能的解决方案：

提供2x图像并以50％的低分辨率显示它们。
检测视网膜显示并提供不同的图像

您如何管理不同设备中的不同分辨率和图像加载？

Answer 1

您可以使用Javascript将LowRes图像交换到HiRes设备上的HiRes图像。有一个JQuery plugin可以做到这一点。 Apple正在为自己的页面使用这种方法（不是JQuery插件），所以它不应该太糟糕。

如果您可以将内联<img>更改为CSS背景图片，则可以使用其他方法。然后，您可以使用媒体查询向HiRes设备提供HiRes图像：

#yourImageConteainer {
   background-image: url('image.png');
}    

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    #yourImageContainer {
        background-image: url('image@2x.png');
        background-size: 100px 100px;
    }
}

我已使用iOS @2x后缀命名HiRes图像，但这不是必需的。

我不会向LowRes设备提供全分辨率图像，因为这会增加图像的大小，从而增加LowRes设备的加载时间而没有任何好处。

如果您可以检测服务器端的HiRes设备，然后为请求设备提供最佳分辨率图像，那么这将是恕我直言的最佳方式。

Answer 2

不要为iPad3 /新iPad过度放大图像。 Safari缩小高分辨率图像http://www.tomshardware.com/reviews/ipad-3-benchmark-review,3156-5.html。以完整iPad3分辨率查看Web图像的唯一方法是保存它们并在Safari之外查看它们。

编辑：

使用新的视网膜显示器macbooks，此评论可能不再适用。拥有高分辨率版本的网页图形可能会在未来变得越来越重要。

iPad 3：如何在uiwebview中下载视网膜图像

2 个答案: