ansaurus

Question

Answer 1

+1 A:

I don't think the @2x trick works with web content. Sounds really useful though, I would certainly file a bug with Apple to request that.

If you are generating the above HTML from your app then I think the best way for now will be to detect if you are running on a Retina display device and then adjusting the image name manually.

You can detect the Retina display by doing something like this:

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2) {
        // Use high resolution images
    }
}

(Took that code from an answer I found here in SO)

St3fan 2010-09-06 17:15:13

Thanks. I'm not generating the HTML from the app but I can probably have 2 different pathForResource files and based on the above test use the appropriate one. I'll give it a try.

Matt Winters 2010-09-06 17:33:37

Unlikely to happen without a (non-standard) META tag or similar — it's not a good idea to double the number of requests you're hitting a server with just to get some prettier images, especially since the majority of websites (i.e. Desktop sites) will render at 1/2 or 1/3 scale anyway.

tc. 2010-09-06 19:12:30

Not done yet, but this is the approach I'm taking. I may not have understood what was meant by "if you are generating the...HTML from your app" and I therefore may have misled tc. The HTML resides in my bundle. It's fixed; used for the app to display formatted text in a UIWebview. No servers involved. I am not generating the HTML on the fly, so I can't substitute a different image name and dimensions, but it's easy enough to have a second HTML file with high resolution image references and dimensions for the iPhone4 and use the suggested code above to decide which pathForResource to use.

Matt Winters 2010-09-07 01:06:55

Answer 2

A:

Currently the best way to do this is by referencing your images in your CSS file using the background-image property. Then, you can use a special CSS file that is only loaded by devices with high resolution screens to override these properties.

See this blog post for more information.

Sebastian Celis 2010-09-06 18:20:40

Answer 3

A:

The way to do it is with CSS backgrounds. Just embedd all your 2x stuff in a subsection in CSS. The key is also to set the -webkit-background-size. Here is an example of the portion of the css (both retina and not) for a div with the id Ampersand that acts as an image.

div#Ampersand {
  background: url('AmpersandBurned.png');
  width:43px;
  height:97px;
  float:left;
  -webkit-background-size: 43px 97px;
}

@media screen and (-webkit-device-pixel-ratio: 2) {
  div#Ampersand {
    background: url('[email protected]');
    width:43px;
    height:97px;
    float:left;
  }
}

dom 2010-09-09 10:45:23

ansaurus

tags:

views:

answers:

High Resolution images in a uiwebview

related questions