UIWebView and iPhone 4 retina display

user_334982 0
Viewed 9214

I have a UIWebView which displays some local text and images. Either I've made a mistake somewhere, or the UIWebView doesn't automatically handle the @2x suffix for high resolution images.

So, my question is has anyone else successfully loaded @2x images into a UIWebView through the normal means, or do I need to do something special? Can I somehow detect if my user has a retina display?

retina-display iphone
6 Answers

I supposed this can also be achieved by using some CSS or Javascript magic to display only the appropriate picture. The main idea is to insert the two pictures, normal and high resolution and then to set the CSS attribute display to none for the pictures to mask :

HTML file

<link href="default.css" rel="stylesheet" media="screen" type="text/css" />
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" />

...

<img src="image.png"    width="..."   height="..."    class="normalRes" />    
<img src="image@2x.png" width="..."   height="..."    class="highRes" />

CSS file : default.css

.normalRes { display:block } /* or anything else */
.highRes   { display:none  }

CSS file : highresolution.css

.normalRes { display:none  }
.highRes   { display:block }  /* or anything else */

I've test it a little bit and it worked well. Need more tests now. I've found the solution here : http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

UPDATE 2012-06-24

Here is another solution with no need for highresolution.css file.
Add the following code in default.css.

@media all and (-webkit-min-device-pixel-ratio: 2) {

   .normalRes { display:none  }
   .highRes   { display:block }

   ...
user_5407800
Related