3

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)

Beau Simensen
  • 4,558
  • 3
  • 38
  • 55

3 Answers3

2

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.

Jess Jacobs
  • 1,137
  • 1
  • 8
  • 19
0

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

Chandan Shetty SP
  • 5,087
  • 6
  • 42
  • 63
  • Thanks, but I have that part. The problem I have is that when I'm running "iPhone (Retina)" my images are all blown up to 2x their size. If I have an image that is 50x50, I don't want it to be rendered scaled up to 100x100. Furthermore, I want the 50x50 image to render as 50x50 on non-retina displays as well. (I realize it will appear smaller on a retina display) – Beau Simensen Mar 28 '11 at 17:23
0

If I understood you correctly here is similar question:

And an excellent blog post on this matter:

Community
  • 1
  • 1
Bartosz Ciechanowski
  • 10,293
  • 5
  • 45
  • 60
  • I've seen many things like this that talk about UIWebView (that is native code, correct?) or handling images through CSS. However, I have IMG tags (in my case, I think that IMG tags make sense) and I want my one image to render at 50x50 in both cases and not scaled up for retina devices. I realize that 50x50 on retina display is going to appear far smaller on a retina device but that does not matter in my case. – Beau Simensen Mar 28 '11 at 17:26
  • Well, you have to be precise, you want 50x50 pixels, not 50x50 points, because on Retina 1 point = 2 pixels. I don't know a lot about CSS, but I guess you can add retina-specific .css file and transform your image to take 0.5 scale in case you detect Retina display. – Bartosz Ciechanowski Mar 28 '11 at 18:07