Developing for all four iPhone resolutions - how do you go about it?

[Vaevictis]

With iPhone 6 out, developing for both iPhone 4, 5, 6 and 6 plus is a must. I’m pretty new to considering adaptive interfaces / content when developing apps, so I’m looking for strategies on how to approach it.

My current case example is a graphic novel-type app. The development process is going to be short, so I’m looking to make an app that just displays in fullscreen on all phones, not necessarily taking advantage of the higher pixel densities. A lot of the content is bitmap pages that need to take up the full screen on all resolutions.

So what are your general strategies for going about this? As I see it, the first issue is the two different aspect ratios. The iPhone 4 is 3:2 whereas all the others are 16:9, so my idea is to first detect if the ratio is 3:2 or not, and make the app either adapt to iPhone 4 or iPhone 5 depending on the result. Apple’s automatic scaling of older apps should then take care of scaling up to iPhone 6 and 6+. Correct?

Secondly, what is the next step? Do I save all the bitmap pages of my graphic novel in a 640x960 version (iPhone 4) and a 640x1136 version (iPhone 5) separately, then load the right one at runtime depending on the aspect ratio detected?

Thirdly, if I work in Flash Pro with a 960x640 canvas size, do I then load the correct bitmap version and place it in the top left corner of the canvas because it will then extend to all the edges of the screen - or do I ‘center’ the iPhone 5 version outside the canvas to make it fit? (Meaning do I place the content at x = 0 for the iPhone 5 version, or at x = - ((1136 - 960) / 2) ?

I hope these questions make sense, especially the last one, and would like to hear how you would approach a project with a short deadline which just needs to run fullscreen on all iPhones.

[kirupa]

That is a challenge, and I don’t know if there is an “easy” way to do that. This article on Adobe touches upon the main concepts you need to be aware of: http://www.adobe.com/devnet/air/articles/multiple-screen-sizes.html

You’ll need to adapt that to the AS3-version of things.

My other question is, do you have to support all of the older iPhones?

[krilnon]

@Vaevictis

Apple’s automatic scaling of older apps should then take care of scaling up to iPhone 6 and 6+. Correct?

Depends on whether or not AIR for iOS has been updated to support the iOS 8 SDK. But I think the App Store is going to stop accepting non-iOS-8-SDK apps soon, if they haven’t already. So check up on that and AIR’s support for it.

@Vaevictis

Secondly, what is the next step? Do I save all the bitmap pages of my graphic novel in a 640x960 version (iPhone 4) and a 640x1136 version (iPhone 5) separately, then load the right one at runtime depending on the aspect ratio detected?

That’s certainly one way to do it. I don’t see too much wrong with that. You’d probably want to make copies for the 6/6+ in that case as well, unless you determine that Apple’s built-in bandaid for old apps will still work.

@Vaevictis

Thirdly, if I work in Flash Pro with a 960x640 canvas size, do I then load the correct bitmap version and place it in the top left corner of the canvas because it will then extend to all the edges of the screen - or do I ‘center’ the iPhone 5 version outside the canvas to make it fit?

I would set stage.scaleMode = StageScaleMode.NO_SCALE, and put the images at (0, 0). You’re already compensating for the scaling issue with your different image sizes. You might also need stage.align = StageAlign.TOP_LEFT.

@Vaevictis

would like to hear how you would approach a project with a short deadline which just needs to run fullscreen on all iPhones

Make sure you have access to devices or the iOS simulator to test the final appearance. Even if you get great advice here, it’d be silly not to have some way of testing it.