optimize (web)app for iPhone 5?

Discussion in 'Web Design and Development' started by wedelgaard, Sep 12, 2012.

  1. wedelgaard macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #1
    Hi Guys,

    So the big day arrived and the iPhone 5 was announced with a new screen size of 640 x 1136.

    Have any of you guys an idea on how to optimize a web app for the new screen (I don't want the black bars at the top and bottom of the app)? Atm. I have an app which works fine for 3GS and iPhone 4 with the content in a 320x480 wrapper div.. But what with the new iPhone 5? What size should the wrapper be?
     
  2. wedelgaard thread starter macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #2
    Since no one answered my post, I did the math myself :) As far as I can calculate the size for web apps for iPhone 5 needs to be 320x548

    Here is my calculations:

    iPhone 5 screen height (portrait):

    (1136 px / 2) -20 px = 548 px

    The minus 20 px is for the mandatory iPhone statusbar.

    iPhone 5 screen width (portrait):

    Same as iPhone 4 and 3GS = 320px
     
  3. IanBauters macrumors newbie

    Joined:
    Jan 1, 2010
    Location:
    Belgium
    #3
    iPhone 5 size

    That's correct, the only problem still to solve is how to get the new start screen on the iPhone 5… Oh well, shouldn't take more than a day to solve
     
  4. wedelgaard thread starter macrumors member

    Joined:
    Jul 26, 2012
    Location:
    Hillerød, Denmark
    #4
    Do you mean the splashscreen for naitive web apps, or the media queries for selecting a specific stylesheet for iphone5?
     
  5. kylejlarson macrumors newbie

    Joined:
    Sep 14, 2012
    #5
    I just put together a guide on this. Looks like you figured it out, but I've also got the startup image in there, assuming it works like the 4s it'd be 640x1096 making the 3 sizes:

    Code:
    <link rel="apple-touch-startup-image" href="images/ios_startup.png"> 
    <link rel="apple-touch-startup-image" href="images/ios_startup@2x.png" sizes="640x920">
    <link rel="apple-touch-startup-image" href="images/ios_startup_large@2x.png" sizes="640x1096">
    iPhone 5 Web Design article
     

Share This Page