在本地UIWebView中使用Retina图像 [英] Using Retina images in a local UIWebView
问题描述
出于某种原因，我不能让UIWebView与我的新Retina图像玩得很好。问题，循序渐进：
For some reason, I cannot get a UIWebView to "play nice" with my new Retina images. The issue, step-by-step:
我正在从捆绑包中加载一系列HTML帮助文件。我的代码加载不同的HTML文件，如果它是iPhone 4（下面的 LWERetinaUtils 是我编写的实用工具类）。我已阅读在此问题中，UIWebView无法自动执行 - 检测@ 2x指标 - 并亲自体验，因此采用这种方法。
I am loading a series of HTML help files out of the bundle. My code loads different HTML files if it's an iPhone 4 (LWERetinaUtils below is a util class I have written). I have read in this question that it is not possible for the UIWebView to auto-detect the @2x indicator - and experienced that personally, hence this approach.
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 是图像标签引用更高分辨率的图像。
The only difference between the contents of foo@2x.html and foo.html is that the image tags refer to higher-resolution images.
然后，我像这样加载我的UIWebView：
Then, I load my UIWebView like this:
_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加载文件中的内容。
_loadPageWithBundleFilename: is just a helper method I wrote to tell the UIWebView to load the content from the file.
到目前为止，我的内容在iPhone模拟器和iPhone 4模拟器之间的加载方式不同 - 而不是我的方式'd expect>。
So far so good, my content is loading differently between iPhone Simulator and iPhone 4 Simulator - and not how I'd expect.
文本显示的大小完全相同 - 但Retina图像似乎按比例放大（它们看起来像素化），它们飞离右端屏幕。
The text shows up exactly the same size - but the Retina images appear to be scaled up (they look pixelated), and they fly off the right end of the screen.
我试过：
_webView.scalesPageToFit = YES
属性，果然，它使图像显示得恰到好处（至少没有像素化）。但是，那时我的文字很小（因为我在网页视图中已经缩小了很多）。
property, and sure enough, it made the images appear appropriately (at least not pixelated). But, then my text was tiny (as I was pretty far zoomed out by the web view).
有谁知道如何解决这类问题？我见过一些Javascript解决方案（喜欢这个），但它们似乎只是图像交换，这就是我上面已经做过的 - 所以它应该可以工作，不是吗？
Does anyone know how to get around this kind of issue? I have seen a few Javascript solutions (like this), but they seem to just be "image swapping", which is what I have already done above - so it should work, no??
最后，在HTML文件中，这是我引用图像的方式：
Finally, in the HTML files, here is the way I am referring to the images:
<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中 - 它似乎没有改变任何事情。
I put the width tag in the CSS - it doesn't seem to change anything.
推荐答案
确保你在< img>上指定身高和宽度。标签。你当然需要至少宽度来完成这项工作。
Make sure you are specifying height and width on your <img> tags. You certainly need at least width to make this work.
这篇关于在本地UIWebView中使用Retina图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
