UIWebView中的高分辨率图像

Question

我有一个显示图像的webview，如下面的代码所示。该包还有一个尺寸为128x128的[e-mail]，适用于iPhone4。[e-mail]从未显示过。是否有一种方法可以根据是iPhone还是iPhone4来显示其中之一？

<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>

- Matt Winters

Answer 1

使用CSS背景来实现。将所有2x的内容嵌入到CSS子部分中。关键是要设置-webkit-background-size。以下是一个示例，其中包含具有作为图像的ID Ampersand的div的CSS（高清和非高清）部分。

div#Ampersand {
  background: url('AmpersandBurned.png');
  width:43px;
  height:97px;
  float:left;
  -webkit-background-size: 43px 97px;
}

@media screen and (-webkit-device-pixel-ratio: 2) {
  div#Ampersand {
    background: url('[e-mail]');
    width:43px;
    height:97px;
    float:left;
  }
}

- monkeydom

---

你救了我啊！我一直找不到在CSS中显示Retina图片的真正解决方案。 - Volatil3

Answer 2

我认为在Web内容中，@2x 技巧不起作用。虽然听起来非常有用，但我肯定会向苹果提出错误报告请求解决这个问题。

如果您的应用程序生成上述HTML，则目前最好的方法是检测是否在Retina显示设备上运行，然后手动调整图像名称。

您可以通过执行以下操作来检测Retina显示屏：

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2) {
        // Use high resolution images
    }
}

（我从这里找到的答案中提取了这段代码）

- Stefan Arentz

---

谢谢。我不是从应用程序中生成HTML，但我可能会有两个不同的pathForResource文件，并根据上述测试使用适当的文件。我会试一试。 - Matt Winters

不使用（非标准）META标签或类似标签的情况下几乎不可能发生——仅仅为了获得更美观的图像而将请求次数翻倍并不是一个好主意，特别是因为大多数网站（即桌面网站）会以1/2或1/3的比例呈现。 - tc.

还没有完成，但这是我采取的方法。我可能没有理解“如果您正在从应用程序生成HTML”所指的意思，因此可能会误导tc。 HTML驻留在我的捆绑包中。它是固定的；用于应用程序在UIWebview中显示格式化文本。 没有涉及服务器。 我不是动态生成HTML，因此无法替换不同的图像名称和尺寸，但很容易拥有第二个HTML文件，其中包含iPhone4的高分辨率图像引用和尺寸，并使用上面建议的代码来决定使用哪个pathForResource。 - Matt Winters

Answer 3

目前最好的方法是使用background-image属性在CSS文件中引用您的图像。然后，您可以使用一种特殊的CSS文件来覆盖这些属性，该文件仅由高分辨率屏幕的设备加载。

有关更多信息，请参见此博客文章。

- Sebastian Celis