Safari Resolution

Discussion in 'Web Design and Development' started by 24inchgamer, Sep 30, 2011.

  1. 24inchgamer macrumors newbie

    Joined:
    Sep 30, 2011
    #1
    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:

    Code:
    <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
     
  2. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    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)
     
  3. 24inchgamer thread starter macrumors newbie

    Joined:
    Sep 30, 2011
    #3
    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:
    Code:
    <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!
     
  4. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #4
    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.
     

Share This Page