iOS Screen Resolutions

iOS screen resolutions from an app developer’s point of view.

2007: In the beginning

Back in 2007 when the first iPhone and iPod Touch were launched, iOS developers only had to worry about one resolution: 480×320.  Its aspect ratio is 3:2.

Life was great.

2010: The retina displays

Fast forward three years and three generations later.  In 2010, the iPhone 4 and iPod Touch 4th generation were launched with the first Retina Displays, which doubled the resolution of the screens.  The new resolution thus was 960×640.  This was great for developers as the new resolution had the same aspect ratio of 3:2.  This meant that layouts and graphics were pretty much backwards compatible.  The only thing would be that using non-retina images on a retina display would just look a little worse.  All app developers needed to do was double the size of the images used in their app and call it a day.

The iPad

Also in the same year (2010), the iPad launched with a resolution of 1024×768 (aspect ratio 4:3).  Obviously a tablet will have a different aspect ratio than a phone.  So now, essentially developers needed to maintain two layouts for the app, one for iPhone, one for iPad.

Life was still quite good.

2012: A longer iPhone

Moving forward to 2012, Apple released the iPhone 5 and the iPod Touch 5th generation.  Apple finally decides to jump on the 16:9 train, so these devices have a 1136×640 resolution (it’s close enough to 16:9).

The iPad retina displays

The iPads also get retina displays in 2012.  They have a resolution of a whopping 2048×1536 pixels (which can’t even fit on most people’s computer monitors).  But as the aspect ratio is kept the same, this is much like the iPhone retina upgrade above.  Between 2012 and 2013, the iPad Mini and its retina version are also introduced with the same resolutions as their larger siblings.

Alright so developers have to keep three variations of layouts in mind now:  3:2 for the old iPhones (plus 1x and 2x graphics for original and retina displays respectively), 4:3 for the iPad (also with 1x and 2x) and ~16:9 for the new iPhones and iPods.

Life was manageable.

2014: A bigger iPhone

Jump ahead again two years.  We now see the iPhone 6 and iPhone 6 Plus being launched.  Their resolutions follow 16×9 and are respectively 1334×750 and 1920×1080.  The iPhone 6 Plus also handles 3x image assets.

Now, for app developers, layouts that need to be considered include 3:2 (old iPhones and iPods), 4:3 (iPads), 16:9 (new iPhones and iPods).  In addition, three versions of the image assets are required, 1x (original displays), 2x (retina displays), 3x (iPhone 6 Plus).

Tools

Thankfully, Apple has also improved Xcode throughout the years with tools in order to help with this task.  Things like Auto Layout help with varying screen sizes and orientations (if you’re willing to throw away support for older devices).

And I guess it still beats the fragmentation in the Android world.

If you need help figuring this out, check out the following links:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.