iosscreen-resolutioniphone-6iphone-6-plus

How does my app currently behaves on an iPhone 6 / iPhone 6 plus?


I got the following numbers for iPhone devices, from PaintCodeApp website

Device          Zoom display  Points   Rendered pixels Scale
                              W   H    W    H          
iPhone 6 Plus   Off           414 736  1242 2208       @3x
iPhone 6 Plus   On            375 667  1125 2001       @3x
iPhone 6        Off           375 667   750 1334       @2x
iPhone 6        On            320 568   640 1136       @2x
iPhone 5        -             320 568   640 1136       @2x
iPhone 4        -             320 480   640  960       @2x
iPhone 3GS      -             320 480   320  480       @1x

Since my apps were designed for iPhone 3GS up to iPhone 5, the supported points frames are 320x480@1x, 320x480@2x and 320x568@2x.

I assume that on an iPhone 6 with the zoom mode enabled, the display should be the exact same as the iPhone 5, since the points frame is 320x568@2x as well. This might be wrong, since I cannot find no confirmation.

Now, what I'm really wondering is how my apps shows on iPhone 6 with the zoom mode off, and on iPhone 6 plus with or without the zoom mode, since the points frames are 375x667@2x, 375x667@3x and 414x736@3x.

Apple Developer Support couldn't give me no hint nor documentation to read on the subject. Since I haven't bought the new devices, is there anyone who knows what actually happens with old apps ?


Solution

  • For those like me who wonder how are treated legacy apps, I did a bit of testing and computation on the subject.

    Thanks to @hannes-sverrisson hint, I started on the assumption that a legacy app is treated with a 320x568 view in iPhone 6 and iPhone 6 plus.

    The test was made with a simple black background bg@2x.png with a white border. The background has a size of 640x1136 pixels, it is black with an inner white border of 1px.

    Below are the screenshots provided by the simulator :

    What we can see on the iPhone 6 screenshot is a 1px margin on top and bottom of the white border, and a 2px margin on the iPhone 6 plus screenshot. This gives us a used space of 1242x2204 on iPhone 6 plus, instead of 1242x2208, and 750x1332 on the iPhone 6, instead of 750x1334.

    We can assume that those dead pixels are meant to respect the iPhone 5 aspect ratio :

    iPhone 5               640 / 1136 = 0.5634
    iPhone 6 (used)        750 / 1332 = 0.5631
    iPhone 6 (real)        750 / 1334 = 0.5622
    iPhone 6 plus (used)  1242 / 2204 = 0.5635
    iPhone 6 plus (real)  1242 / 2208 = 0.5625
    

    Second, it is important to know that @2x resources will be scaled not only on iPhone 6 plus (which expects @3x assets), but also on iPhone 6. This is probably because not scaling the resources would have led to unexpected layouts, due to the enlargment of the view.

    However, that scaling is not equivalent in width and height. I tried it with a 264x264 @2x resource. Given the results, I have to assume that the scaling is directly proportionnal to the pixels / points ratio.

    Device         Width scale             Computed width   Screenshot width
    iPhone 5        640 /  640 = 1.0                        264 px
    iPhone 6        750 /  640 = 1.171875  309.375          309 px
    iPhone 6 plus  1242 /  640 = 1.940625  512.325          512 px
    
    Device         Height scale            Computed height  Screenshot height
    iPhone 5       1136 / 1136 = 1.0                        264 px
    iPhone 6       1332 / 1136 = 1.172535  309.549          310 px
    iPhone 6 plus  2204 / 1136 = 1.940141  512.197          512 px
    

    It's important to note the iPhone 6 scaling is not the same in width and height (309x310). This tends to confirm the above theory that scaling is not proportional in width and height, but uses the pixels / points ratio.

    I hope this helps.