Using Retina images in a local UIWebView

Question

For some reason, I cannot get a UIWebView to "play nice" with my new Retina images. The issue, step-by-step:

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:@"[email protected]",@"[email protected]",nil];
else
  htmls = [NSArray arrayWithObjects:@"foo.html",@"bar.html",nil];

The only difference between the contents of [email protected] and foo.html is that the image tags refer to higher-resolution images.

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: is just a helper method I wrote to tell the UIWebView to load the content from the file.

So far so good, my content is loading differently between iPhone Simulator and iPhone 4 Simulator - and not how I'd expect.

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.

I tried the:

_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).

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??

Finally, in the HTML files, here is the way I am referring to the images:

<img src="[email protected]" border="0" title="Welcome!" class="title"/>

And the CSS:

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

I put the width tag in the CSS - it doesn't seem to change anything.

Answer 1

Make sure you are specifying height and width on your <img> tags. You certainly need at least width to make this work.

Answer 2

If you don't care about letting WebKit handle resizing (shrinking) the images on the declining population of non-retina devices, you can just do this:

1. Just provide @2x images.
2. Specify the nominal (non-high-def) image size in your IMG tag, or with the CSS3 background-size property.