Safari Resolution

[24inchgamer]

Hi Guys,

I would like to display full screen images with no scaling in Safari when viewing in portrait mode. I was just curious as to why I have to set my image widths to 320px in my CSS when I have the following in my html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

If the width is set to device-width wouldn't that mean I should have my images set to 640px? as the iPhone's resolution is 960x640!?

I tried setting scale to zero and then setting my image widths as 640px but that leaves space either side of them.

Am I missing something here?

I guess my real question is, what is the actual visible resolution in Safari when scale is set to 0 and also set to 1. As it seems neither of them are 640px.

Thanks in advance

 

[jsm4182]

I've been trying to understand this myself. Wether on an iPhone 4 or an older iPhone the resolution in safari and web apps seems to be 320x480(320x396 left after the top and bottom bars are added)

 

[24inchgamer]

I've been trying to understand this myself. Wether on an iPhone 4 or an older iPhone the resolution in safari and web apps seems to be 320x480(320x396 left after the top and bottom bars are added)

Right, after a bit of digging around it seems that on the iPhone4 the display is simply X2 the previous resolution, but pixels are simply smaller to fit in the same physical screen space. So where there was 1px there are now 2px in it's place.

My solution was to save my images (photographs not graphics) with a resolution of 640px wide and then set their width's to 100% in the CSS (when held in portrait orientation). This is with the below viewport setting:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

This produces a razor sharp full screen display of my image.

I found these articles really helpful:
http://aralbalkan.com/3331
http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml

If you read the comments of the second one there are some interesting replies!

Oh and DPI/PPI seem to be ignored, just make sure your image is 640px wide (or 960px wide depending on screen orientation)

So for older iPhones I'm guessing you would have your width's set to 320px.

Hope that helps!

 

[jsm4182]

Thats some useful information but doesn't help what I'm trying to fire out. I'm trying to figure out how to get the full resolution for a web app loading screen. It seems to only use the image if its 320x640. I think the simple solution would be to use a svg instead of png(which isn't a problem for the web app I'm working on now since its already a vector graphic) but I'd like to figure out how to get better looking photos on the load screen.