Enable Support for the 640x1136 iPhone 5 Screen (without letterboxing)

Letterboxed apps have arrived! As anticipated, the new iPhone 5 has a new taller display with an aspect ration of 16:9 that doesn’t fit the 3:2 of every other iPhone. Without a developer update, your regular iPhone apps will run as is but with black bars at the top and bottom of the app like letterboxed movies. This introduces the first real UI fragmentation in the iOS platform so you’ll will need to configure a few things to accommodate it.

In many cases the longer screen isn’t going to be a big deal. If your app is primarily using scroll views, such as a list, then once your build target is configured to support the larger screen your app will magically “just work” and automatically expand to fill the space—this is assuming you haven’t hard coded a height of 480 into your app.

Adding 4” Screen Support

Enabling support in your app really easy. All you need to do drop a new Default-568h@2x.png sized to 640x1136 into the Retina (4-inch) image well in the target’s project settings.

That’s it!

More About Resizing

If you’re not relying on the Apple supplied UIKit components, now would be a good time to start learning about auto layout. If you’ve done any work in interface builder, you’ve already come across the various auto-resizing constraints which allow parts of the app to stretch out nicely as required. Auto layout in iOS 6 takes auto-resizing constraints and puts them on steroids, adding advanced positioning based on the size and position of other elements on the screen as well as the content of localization files. If you haven’t looked into auto layout yet, be sure to check out the guide and the WWDC videos:

But I can’t use Auto Layout in iOS 4/5!

If you need to position elements on the screen at a very specific location based on screen size, you shouldn’t be hard coding those values. Instead, for the bounds of entire screen, use the main screen’s bounds:

CGRect bounds = [[UIScreen mainScreen] bounds];

or if you want just the frame of application itself (less the status bar if visible), use the application fame:

CGRect bounds = [[UIScreen mainScreen] applicationFrame];

Also, if you need to detect which screen type the app is using, here’s a nice code snippet from the dev forums that detects the device and screen type based on known values:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
	if ([UIScreen mainScreen].scale == 2.0f) {
		CGSize result = [[UIScreen mainScreen] bounds].size;
		CGFloat scale = [UIScreen mainScreen].scale;
		result = CGSizeMake(result.width * scale, result.height * scale);

		if(result.height == 960){
			NSLog(@"iPhone 4, 4s Retina Resolution");
		}
		if(result.height == 1136){
			NSLog(@"iPhone 5 Resolution");
		}
	} else {
                NSLog(@"iPhone Standard Resolution");
	}
} else {
	if ([UIScreen mainScreen].scale == 2.0f) {
		NSLog(@"iPad Retina Resolution");
	} else{
		NSLog(@"iPad Standard Resolution");
	}
}

What about iOS3 support?

It’s time to let it go. The market is tiny and Xcode 4.5 doesn’t support any version of iOS before 4.3, nor does it support the armv6 architecture. If you really need to support 3x OSes, you’ll need to hang on to an older version of the developer tools and either release two apps or be ok with the letterbox.