UIWebView和iPhone 4视网膜显示屏

Question

我有一个UIWebView显示一些本地文本和图像.我在某个地方犯了错误,或者UIWebView没有自动处理@2x高分辨率图像的后缀.

所以,我的问题是有没有其他人通过正常方式成功地将@2x图像加载到一个UIWebView,或者我需要做一些特别的事情？我可以以某种方式检测我的用户是否有视网膜显示器？

Answer 1

按您的要求...

测试功能.如果你想知道你是否需要显示视网膜图像或常规图像,那么测试你的设备是否有视网膜显示器,而不是特定型号的显示器(未来证明你的应用程序尽你所能,意味着你必须改变当一个新模型出来时,更少的东西).为此,您可以使用以下示例代码:

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

在我写这篇文章时,这段代码在所有型号和所有固件版本上都是安全的.它在未来版本中也是安全的,直到Apple弃用该scale方法,这可能永远不会发生.

更多关于你的问题,我不知道如何在webview中做到这一点,而没有预先设置视网膜图像和非视网膜图像的位置.一旦我有了这些信息,我(过去)用它来替换网页希望我替换的一些已知的哨兵文本,就像在HTML中说的那样:{{{image_location}}}我可以下载HTML数据的地方,将其替换为字符串格式,然后替换该字符串替换该文本,如果我们在视网膜显示器上,使用适当的比例因子,或者如果不是正常大小的图像,则使用@ 2x图像的URL(使用上面的代码).

希望如果没有人提供更好的解决方案,这会有所帮助.

Answer 2

我在视网膜设备上运行时使用此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];
  }
});

提示是将其添加到名为eg的文件中scaledimages.js然后使用

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

确保js文件列在"复制包资源"中,而不是在目标"构建阶段"中的"编译源"中.默认的Xcode接缝将Javascript文件检测为它喜欢编译的内容.另请注意,如果devicePixelRatio将来碰巧为3或更高,当前脚本可能会破坏事物,预防措施可能是暂时更改(scale == undefined || scale == 1)为scale != 2仅加载@2x.

更新:还有一个jQuery-Retina-Display-Plugin做了类似的事情,但要求你设置width属性和接缝也使用HEAD请求来查看图像是否存在,不确定它将如何对本地文件起作用.