Question

我有一个显示图像的webview，如下面的代码所示。该套装还有一个DGT64@2x.png，尺寸为128x128，可在iPhone4上使用。 DGT64@2x.png永远不会显示。有没有办法显示/或取决于它是iPhone还是iPhone4？

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

Answer 1

这样做的方法是使用CSS背景。只需将所有2x内容嵌入CSS的子部分中。关键还在于设置-webkit-background-size。下面是一个div的一部分（视网膜和非视网膜）的一个例子，其中id为Ampersand，用作图像。

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('AmpersandBurned@2x.png');
    width:43px;
    height:97px;
    float:left;
  }
}

Answer 2

我认为@2x技巧不适用于网页内容。虽然听起来很有用，但我肯定会向Apple提出一个错误请求。

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

您可以通过以下方式检测Retina显示屏：

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

（从我在SO中找到的答案中获取该代码）

Answer 3

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

有关详细信息，请参阅this blog post。

uiwebview中的高分辨率图像

3 个答案: