UIWebView和iPhone4视网膜显示器

我有一个

UIWebView

，它显示一些本地文本和图像。要么是我在某个地方犯了错误，要么是

UIWebView

无法自动处理高分辨率图像的

@2x

后缀

---

因此，我的问题是，是否有其他人通过正常方式成功地将

@2x

图像加载到

UIWebView

中，或者我需要做一些特殊的事情？我是否可以检测我的用户是否有视网膜显示器？

至于检测，您可以使用。我刚刚更新了它，以检测iPhone 4。

根据您的要求

测试功能。如果你想知道你是需要显示视网膜图像还是常规图像，那么就测试你的设备是否有视网膜显示器，而不是它是否属于某个特定的型号（如果你的应用程序能够经得起未来的考验，那就意味着当一个新型号问世时，你必须更换更少的东西）。为此，可以使用以下示例代码：

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] &&
   [[UIScreen mainScreen] scale] == 2.0)
{
    /* We have a retina display. */
}
else
{
    /* We do not. */
}

在我写这篇文章时，所有型号和所有固件版本上的代码都是安全的。它在未来的版本中也将是安全的，直到苹果反对

scale

方法，这可能永远不会发生

关于你的问题，我不知道如何在没有视网膜图像和非视网膜图像的位置的情况下在网络视图中做到这一点。一旦我有了这些信息，我（在过去）就用它来替换一些已知的哨兵文本，网页希望我替换这些文本，比如我会在HTML中放一些东西，上面写着：

{{{{{image_location}}}

在那里我可以下载HTML数据，将其转换成字符串格式，然后在字符串上替换该文本，如果我们在视网膜显示器上，则使用@2x图像的URL，使用适当的比例因子，如果没有，则使用正常大小的图像（使用上述代码）

如果没有人能提供更好的解决方案，希望这能有所帮助。

只要始终做到：

<img src="image@2x.png" width={half-width} />

对于CSS引用的背景图像，请使用-webkit background size将其设置为一半大小

---

缺点：非视网膜设备会下载过大的图像。

我想这也可以通过使用一些CSS或Javascript魔术来实现，只显示适当的图片。其主要思想是插入两张图片（普通和高分辨率），然后将CSS属性显示设置为“无”，以便遮罩图片：

HTML文件

<link href="default.css" rel="stylesheet" media="screen" type="text/css" />
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" />

CSS文件：高分辨率.CSS

.normalRes { display:block } /* or anything else */
.highRes   { display:none  }

.normalRes { display:none  }
.highRes   { display:block }  /* or anything else */

我测试了一下，效果很好。现在需要更多的测试。 我在这里找到了解决方案：

更新2012-06-24 这是另一个不需要highresolution.css文件的解决方案。
在default.css中添加以下代码

---

最好的解决方案是对基于视网膜和非视网膜的网络视图使用高分辨率图像。然后使用“宽度”和“高度”属性设置图像的大小（以点为单位）

<img src="hi-res-icon.png" width="10px" height="10px" />

---

在视网膜设备上运行时，我使用此Javascript黑客加载缩放图像。它将更改所有图像上的

src

和

width

属性，以使用相应的缩放图像。请注意，我只对本地图像进行了测试

设置

display:none

，然后在图像加载接缝上重置它以修复一些闪烁。还请注意，此代码可能与WebKit以外的其他浏览器不兼容

document.addEventListener("DOMContentLoaded", function() {
  var scale = window.devicePixelRatio;
  // might want this to be scale != 2
  if (scale == undefined || scale == 1) {
    return;
  }

  var re = /^(.*)(\..*)$/;
  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = re.exec(img.src);
    if (groups == null) {
      continue;
    }

    img.style.setProperty("display", "none");
    img.addEventListener("load", function(event) {
      event.target.width /= scale;
      event.target.style.setProperty("display", "");
    });
    img.src = groups[1] + "@" + scale + "x" + groups[2];
  }
});

确保js文件列在“复制包资源”中，而不是目标“构建阶段”中的“编译源代码”中。默认的Xcode接缝将Javascript文件检测为它喜欢编译的东西。还请注意，如果将来

devicePixelRatio

恰好为3或更大，当前脚本可能会中断，预防措施可能是将

（scale==undefined | | scale==1）

更改为

scale！=2

目前仅加载

@2x

---

更新：还有一个类似的方法，但要求您设置

宽度
属性，并使用
头
请求查看图像是否存在，不确定该方法对本地文件的效果如何。
-1用于推荐测试设备而非功能的代码。建议检查
UIScreen
是否响应
scale
，如果响应，请在
UIScreen
s
main屏幕上调用
scale
，并检查其值是否为2.0。如果这些条件是真的，视网膜就会显示出来。在这种情况下，你不能得到假阳性，所以我不会犹豫。但是屏幕检查更好，是的。取消上面确认的否决票。再补充一点，我之所以否决它，是因为这些类型的硬件检查在一段时间内效果很好，但在5个月后，当苹果发布一款新设备（可能带有视网膜显示器）时，我们必须编辑代码使其在那里工作，而如果我们检查规模，它会自动工作。谢谢，但我仍然希望有人能在UIWebView中自动实现这一点。无论以何种方式检查设备都是一个笨拙的解决方案。也就是说，@jer你能在另一条评论中发布你的解决方案吗？如果这是我最后唯一的好选择，那么我可以接受作为答案？鉴于没有更好的答案，我接受这是一个可行的解决方案。理想情况下，UIWebView应该自己处理本地图像，但检查设备屏幕比例并相应调整HTML是可行的。在2倍模式的iPad上，比例也是2.0。当然，这与iPhone应用程序有关。iPad应用程序不会以缩放模式运行。因此，如果您在iPhone应用程序上正确处理此情况，则不会出现问题。：）那么，当iPhone 6的刻度上升到7.0时会发生什么呢？没有视网膜了-P获取比例因子，然后向（web或其他）应用程序询问相应的图像，怎么样？eek，对不起！我几乎重复了哈弗索尔的回答，我不知道为什么这次投票被否决了。我自己也在一个应用程序中使用过它，它运行得很好，至少在使用小HTML时是这样
<img src="hi-res-icon.png" width="10px" height="10px" />

document.addEventListener("DOMContentLoaded", function() {
  var scale = window.devicePixelRatio;
  // might want this to be scale != 2
  if (scale == undefined || scale == 1) {
    return;
  }

  var re = /^(.*)(\..*)$/;
  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = re.exec(img.src);
    if (groups == null) {
      continue;
    }

    img.style.setProperty("display", "none");
    img.addEventListener("load", function(event) {
      event.target.width /= scale;
      event.target.style.setProperty("display", "");
    });
    img.src = groups[1] + "@" + scale + "x" + groups[2];
  }
});

<script type="text/javascript" src="scaledimages.js"></script>