在本地UIWebView中使用Retina图像

Question

出于某种原因,我不能让UIWebView与我的新Retina图像"玩得很好".这个问题,一步一步:

我正在从包中加载一系列HTML帮助文件.我的代码加载不同的HTML文件,如果它是iPhone 4(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模拟器和iPhone 4模拟器之间的加载方式不同 - 而不是我的期望.

文本显示完全相同的大小 - 但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中 - 它似乎没有改变任何东西.

Answer 1

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

Answer 2

如果你不关心让WebKit处理非视网膜设备数量下降的图像大小调整(收缩),你可以这样做:

1. 只需提供@ 2x图像.
2. 在IMG标记中指定标称(非高清)图像大小,或使用CSS3 background-size属性.