我有一个UIWebView显示一些本地文本和图像的。要么我在某处犯了错误，要么UIWebView没有自动处理@2x高分辨率图像的后缀。
@2x所以，我的问题是有没有其他人通过正常方式成功地将图像加载到 aUIWebView中，还是我需要做一些特别的事情？我能以某种方式检测我的用户是否有视网膜显示器吗？
问问题
9208 次
6 回答
15
按您的要求...
测试功能。如果您想知道是否需要显示视网膜图像或常规图像，请测试您的设备是否具有视网膜显示器，而不是特定型号（尽可能地证明您的应用程序的未来，这意味着您必须更改当新模型出现时，东西会更少）。为此，您可以使用以下示例代码：
if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] &&
[[UIScreen mainScreen] scale] == 2.0)
{
/* We have a retina display. */
}
else
{
/* We do not. */
}
截至我撰写本文时，此代码在所有型号和所有固件版本上都是安全的。在 Apple 弃用该方法之前，它在未来的版本中也将是安全的scale，这可能永远不会发生。
关于您的问题的更多信息，如果事先没有视网膜图像和非视网膜图像的位置，我不知道如何在 web 视图中执行此操作。一旦我有了这些信息，我（过去）就用它来替换网页期望我替换的一些已知标记文本，就像我会在 HTML 中放入一些内容：{{{image_location}}}我可以在哪里下载 HTML 数据，将其转换为字符串格式，然后在该字符串上替换该文本，如果我们在视网膜显示器上，则使用 @2x 图像的 URL，使用适当的比例因子，如果不是，则使用正常大小的图像（使用上面的代码）。
如果没有人提出更好的解决方案，希望这会有所帮助。
于 2010-09-16T07:35:10.437 回答
5
在视网膜设备上运行时，我使用这个 Javascript hack 来加载缩放图像。它将更改所有图像的srcandwidth属性以使用相应的缩放图像。请注意，我仅使用本地图像对此进行了测试。
设置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请求来查看图像是否存在，不确定这将如何用于本地文件。
于 2011-10-12T14:13:01.383 回答
4
我想这也可以通过使用一些 CSS 或 Javascript 魔术来仅显示适当的图片来实现。主要思想是插入两张图片，正常和高分辨率，然后将 CSS 属性display设置为none以使图片蒙版：
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 文件：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
更新 2012-06-24
这是另一个不需要highresolution.css文件的解决方案。在default.css
中添加以下代码。
@media all and (-webkit-min-device-pixel-ratio: 2) {
.normalRes { display:none }
.highRes { display:block }
...
于 2010-12-29T14:24:34.343 回答
2
总是这样做：
<img src="image@2x.png" width={half-width} />
对于 CSS 引用的背景图像，使用 -webkit-background-size 将它们缩小一半。
缺点：非视网膜设备会下载过大的图像。
于 2010-10-01T17:38:48.193 回答
1
最好的解决方案是将高分辨率图像用于基于视网膜和非基于视网膜的 WebView。然后使用 width 和 height 属性设置图像的大小（以磅为单位）。
<img src="hi-res-icon.png" width="10px" height="10px" />
于 2011-07-20T12:21:16.647 回答
0
至于检测，您可以使用此代码示例。我刚刚更新它以检测 iPhone 4。
于 2010-09-16T06:00:18.183 回答