0

我有一个混合 iPad 应用程序在 web 视图中加载 html 和 javascript。

所有图像在 ipad 1 和 2s 中都可以，但在 ipad 3 中模糊。

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

  1. 提供 2x 图像并在低分辨率 ipad 中以 50% 的比例显示它们。
  2. 检测视网膜显示并提供不同的图像

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

4

2 回答 2

1

您可以使用 Javascript 将 LowRes 图像交换为 HiRes 设备上的 HiRes 图像。有一个JQuery 插件可以做到这一点。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 设备，然后为请求设备提供最佳分辨率图像，那么恕我直言，这将是最好的方法。

于 2012-05-24T06:25:00.460 回答
1

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

编辑：

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

于 2012-05-25T12:25:15.963 回答