10

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

我正在从包中加载一系列 HTML 帮助文件。如果它是 iPhone 4，我的代码会加载不同的 HTML 文件（LWERetinaUtils下面是我编写的 util 类）。我在这个问题中读到 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 Simulator 和 iPhone 4 Simulator 之间的加载方式不同 - 而不是我所期望的。

文本显示的大小完全相同 - 但 Retina 图像似乎被放大（它们看起来像素化），并且它们从屏幕的右端飞出。

我试过了：

_webView.scalesPageToFit = YES

属性，果然，它使图像看起来适当（至少没有像素化）。但是，我的文字很小（因为我被网络视图缩小了很多）。

有谁知道如何解决这种问题？我见过一些 Javascript 解决方案（像这样），但它们似乎只是“图像交换”，这是我在上面已经完成的 - 所以它应该可以工作，不是吗？

最后，在 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 中 - 它似乎没有改变任何东西。

4

2 回答 2

11

确保在 <img> 标签上指定高度和宽度。你当然至少需要宽度才能完成这项工作。

于 2010-10-27T13:23:40.070 回答
6

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

  1. 只需提供@2x 图像。
  2. 在您的 IMG 标签中或使用 CSS3 background-size 属性指定标称（非高清）图像大小。
于 2012-09-17T17:49:42.897 回答