optimize (web)app for iPhone 5?

[wedelgaard]

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?

 

[wedelgaard]

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

 

[IanBauters]

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

 

[wedelgaard]

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

Do you mean the splashscreen for naitive web apps, or the media queries for selecting a specific stylesheet for iphone5?

 

[kylejlarson]

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:

<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