Skip to main content
B
BorisHansen
Inspiring
November 2, 2014
Question

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

  • November 2, 2014
  • 1 reply
  • 1181 views

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.

This topic has been closed for replies.

1 reply

Colin Holgate
Colin Holgate
Inspiring
November 2, 2014

Do you have different versions of the graphic novel pages, or is there just one version of the page? If there is one version, can you crop into the page without losing anything important?

I would guess that there is one version, and that cropping into the page will lose something important. If that's the case, here's how I would handle it:

Make a stage that is 14:9. The size doesn't matter, but 1400x900 could be a good starting point.

Put down a background texture that fits well with the look of the other images. Make that fill the 1400x900 stage.

Place your page graphics so that they are within the center 1200x788 area of the stage.

Set the stage scalemode to "noBorder".

You now have a layout that will work on all devices, as narrow as iPad, and as wide as iPhone 5. All without any code. On the widest devices you'll see a bit of your background pattern to the left and right of the page graphic. On the narrowest devices you'll see a bit of background pattern above and below the page graphic. But you won't lose sight of anything important.

B
BorisHansenAuthor
Inspiring
November 2, 2014

This was immensely helpful. I like the idea of using a large background outside the canvas and centering the content on it to make the app fullscreen, if I understand you correctly.

I *could* work with two versions (resolutions) of the page. One 640x1136 and one 640x960. Once I've detected the aspect ratio and loaded the proper version, is it just a matter of placing the 1136 version so that an equal amount 'sticks out' to the left and the right of the canvas to make it show in full screen? (If my canvas is 960x640, that is.)

Also, I don't understand why I would use "noBorder", if I understand the scalemodes correctly. Shouldn't I use "noScale" to make sure everything stays in its original resolution?

Colin Holgate
Colin Holgate
Inspiring
November 2, 2014

If you're going to create two sets of images, drawn to suit 9:16 and 2:3, you could work out the nearest ratio for the device and load the right one. If that's how you went you could have a stage that is say 640x1136, that exactly matches the 9:16 version, and the 2:3 version would be the height of the stage and centered on the stage horizontally. You hopefully can imagine that means that some of the picture goes off the edges of the stage. If you then use the stage scalemode of "showAll" (which is the default scalemode for Flash), that extra stuff would be revealed on iPhone 4.

Using noScale would mean that only the top left quarter of your graphics would appear on non-Retina phones. You can solve that by putting everything into a movieclip and scaling the movieclip to fit the screen size, but that's exactly what stage scalemode does for you. With either showAll or noBorder the stage gets scaled in a way that works on Retina and non-Retina.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices