10

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

The only difference between the contents of foo@2x.html 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="welcome@2x.png" 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.

Community
  • 1
  • 1
makdad
  • 6,402
  • 3
  • 31
  • 56
  • It would help to see a snippet of your HTML code. How you setup the UIWebView doesn't matter for the image scaling. It is all in the HTML/CSS/JS. – Mike Oct 27 '10 at 13:24
  • Mike, added in at your request- – makdad Oct 28 '10 at 01:02
  • Maybe my answer to a similar question is interesting http://stackoverflow.com/questions/3724058/uiwebview-and-iphone-4-retina-display/7741453#7741453. It uses Javascript to load scaled images and set the width properly and seams work fine with local images at least. – Mattias Wadman Oct 12 '11 at 14:16

2 Answers2

11

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

Mike
  • 8,853
  • 3
  • 35
  • 44
  • Mike - I think I may have seen that. You're right, I'm currently not doing that. Question two - for the Retina images, am I specifying the "real" pixel width, or the "perceived" pixel width? I'll give this a shot. – makdad Oct 28 '10 at 00:27
  • 5
    This worked. In answer to my own question (and no one else wrote about this so I hope I can help someone else): The WIDTH property on the IMAGE tag should be set to the ORIGINAL (non-high-def) image width. – makdad Oct 28 '10 at 01:12
  • This answer works well enough for standard inline images, but what about CSS Background Images? Those don't seem to work properly either, and it's not so easy to set their width and height. Any thoughts? – Axeva Dec 10 '10 at 01:01
  • You have to specify the background-size CSS property for sprites, i.e., when using CSS background images. – Mike Dec 10 '10 at 16:27
6

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.
c roald
  • 1,984
  • 1
  • 20
  • 30