User Interface: Sizes of iPhone UI Elements

iPhone Development 101: User Interface: 
Sizes of iPhone UI Elements

How to detect the current device size (and how to tell if it's an iPhone 5)

Element	iPhone 4S (and earlier)	iPhone 5
Window (including status bar)	320 x 480 pts	320 x 568 pts
Status Bar (How to hide the status bar)	20 pts	20 pts
View inside window  (visible status bar)	320 x 460 pts	320 x 548 pts
Navigation Bar	44 pts	44 pts
Nav Bar/Toolbar Icon	white icon - up to 20 x 20 pts (transparent PNG)
Tab Bar	49 pts	49 pts
Tab Bar Icon	up to 30 x 30 pts (transparent PNGs)
Text Field	31 pts	31 pts
Height of a view inside  a navigation bar	416 pts	504 pts
Height of a view inside  a tab bar	411 pts	499 pts
Height of a view inside  a navbar and a tab bar	367 pts	455 pts
Portrait Keyboard (English)	320 x 216 pts	320 x 216 pts
Landscape Keyboard (English)	480 x 162 pts	568 x 162 pts
Launch Image (Launch Image Sizes for iPhone & iPad)	640 x 960 pixels	640 x 1136 pixels

This page is available as an interactive version in the idev101 app!

Points vs. Pixels

Apple introduced retina displays starting with the iPhone 4. These have twice as many screen pixels as previous iPhones. You don't have to modify your code to support high-res displays; the iOS coordinate system uses points rather than pixels, so the dimensions and position in points of all UI elements remains the same across all devices.

iOS supports high resolution displays via the scale property on UIScreen, UIView, UIImage, and CALayer classes. If the object is displaying high-resolution content, its scale property is set to 2.0. Otherwise it defaults to 1.0.

Retina Graphics To support high-resolution graphics on devices with retina displays, create two versions of the image: a standard size image, and a double-sized image with "@2x" added to the name:

Standard Size: High Resolution: button.png 60 x 20 button@2x.png 120 x 40

To refer to an image in your code (or in Interface Builder), use the filename of the standard sized image. iOS will automatically detect and use the @2x version if the device supports it: