uiwebview中的高分辨率图像

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中找到的答案中获取该代码)