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

至于检测，你可以使用this code sample。我刚更新它也检测iPhone 4.

Answer 3

就始终做到：

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

对CSS的引用背景图像，使用-webkit-背景大小的一半大小的他们。

缺点：非视网膜设备将下载超大图像。

Answer 4

我认为这也可以通过使用一些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" /> 

。 ...

<img src="image.png" width="..." height="..." class="normalRes" />  
<img src="image@2x.png" width="..." height="..." class="highRes" /> 

CSS file：default。CSS

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

CSS文件：highresolution.css

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

我已经测试它一点点，效果不错。现在需要更多的测试。 我发现这里的解决方案：http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

UPDATE 2012-06-24

这里是不需要highresolution.css文件中的另一个解决方案。
将以下代码添加到default.css。

@media all and (-webkit-min-device-pixel-ratio: 2) { 

    .normalRes { display:none } 
    .highRes { display:block } 

    ... 

Answer 5

最好的解决方案是将高分辨率图像用于基于视网膜和非视网膜的WebViews。然后使用width和height属性设置图像的大小（以点为单位）。

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

Answer 6

我使用此JavaScript hack在视网膜设备上运行时加载缩放图像。它将更改所有图像上的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]; 
    } 
}); 

提示是将其添加到名为例如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要求，看是否像存在，不知道如何将本地文件的工作。