Images blurry in iphone 4 mobile safari

Question

I'm making a mobile web app and am having some trouble with my images. They look great on my desktop but all blurry in the iPhone. I guess it's cause' of the retina display and that mobile safari needs to double the size of the web sites.

Is there a workaround to get the images to appear crisp on the iPhone 4?

Answer 1

I have found the answer. I found this article: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries Which advocates using media queries like this:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #map-page .ui-icon {
        background-image: url("/images/retina/4_ikon_hitta.png");
    }
}

This works for now but i not an optimal solution. In the comments of another article there where talk about not using pixels as a measurement at all, which made perfect sense. The iPhone4 is just the first of many high dpi-devices to come. So a pixel will be even more sizes in the future.

Mobile Safari have since ios 2.1 support for SVG so depending on what devices you have to support SVG (maybe with some fallback) is something to strongly consider.

For my (and yours too!) next project I'm digging in to ems, points, % and SVG.