Why does iOS Simulator render my images at lower resolution in mobile Safari for Retina?

I'm trying to test my web application in mobile Safari with a Retina display and only have access to iOS Simulator. My images are all rendering at 2x resolution. I realize that this probably makes sense on some level, but I actually want the images 开发者_运维问答to render at their natural resolution.

How can I get img tags to render at their natural resolution in Mobile Safari on an iPhone retina device? (simulator or otherwise)

UPDATE

I am not writing a native application and calling out to Safari, I'm writing a plain ol' website and I want Safari to render my img tag images at full resolution both for retina and non-retina devices. (I'm aware, will accept and desire the fact that the image will be smaller on a retina device)

You need to make use of a media query. Retina won't automatically assume you are using 2x assets without it; that would cause all website graphics to render at 50% of their intended size. Disaster!

(from HTML5 boilerplate):

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

You can also use ratio: 2 here to target only iPhone Retina, but some devices, like Samsung Galaxy S, also have a pretty high res - 220ppi, i think - though they aren't exactly double, so watch out for that. These devices respond to the 1.5 query. The ratio comes from the amount of actual pixels that take up a visible pixel. Pixel math, yay! Finally proves they are not (and have never been) absolute units.

Select the hardware in simulator iOS simulator->Hardware->Device->iPhone(Retina) and run your app

If I understood you correctly here is similar question:

• UIWebView and iPhone4 retina display

And an excellent blog post on this matter:

• How to make your web content look stunning on the iPhone 4’s new Retina display