Question

出于某种原因，我不能让UIWebView与我的新Retina图像“玩得很好”。这个问题，一步一步：

我正在从捆绑包中加载一系列HTML帮助文件。我的代码加载不同的HTML文件，如果它是iPhone 4（下面的LWERetinaUtils是我编写的实用工具类）。我已阅读in this question，UIWebView无法自动检测@ 2x指标 - 并亲自体验过这种方法。

if ([LWERetinaUtils isRetinaDisplay])
  htmls = [NSArray arrayWithObjects:@"foo@2x.html",@"bar@2x.html",nil];
else
  htmls = [NSArray arrayWithObjects:@"foo.html",@"bar.html",nil];

foo@2x.html和foo.html的内容之间的唯一区别是图片代码指的是分辨率更高的图片。

然后，我加载我的UIWebView：

  _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 375.0f)];
  _webView.delegate = self;
  [self _loadPageWithBundleFilename:self.filename];
  [self.view addSubview:_webView];

_loadPageWithBundleFilename:只是我写的一个帮助方法，告诉UIWebView加载文件中的内容。

到目前为止，我的内容在iPhone模拟器和iPhone 4模拟器之间的加载方式不同 - 而不是我的期望。

文本显示完全相同的大小 - 但Retina图像似乎按比例放大（它们看起来像素化），它们飞离屏幕的右端。

我试过了：

_webView.scalesPageToFit = YES

属性，果然，它使图像显得恰到好处（至少没有像素化）。但是，那时我的文字很小（因为我的网页视图已经缩小了很多）。

有谁知道如何解决这类问题？我已经看到了一些Javascript解决方案（like this），但它们似乎只是“图像交换”，这是我上面已经做过的 - 所以它应该工作，不是吗？

最后，在HTML文件中，这是我引用图像的方式：

<img src="welcome@2x.png" border="0" title="Welcome!" class="title"/>

CSS：

body{ margin:20pt; padding:10pt; line-height:38pt; font-size:24pt; text-align:left; background-color: transparent; font-family:Helvetica,sanserif; width:640pt;}

我将宽度标记放在CSS中 - 它似乎没有改变任何东西。

Answer 1

确保您在＆lt; img＆gt;上指定高度和宽度标签。你当然需要至少宽度来完成这项工作。

Answer 2

如果您不关心让WebKit处理非视网膜设备数量下降的图像大小调整（缩小），您可以这样做：

只提供@ 2x图片。
在IMG标记中指定标称（非高清）图像大小，或使用CSS3 background-size属性。

在本地UIWebView中使用Retina图像

2 个答案: