iPhone 101
Code Tips
Resources
More
iPhone Device & Screen Sizes and Resolutions
To get the screen dimensions (in points) of the current device:
Objective-C:
CGRect screenBounds = [[UIScreen mainScreen] bounds]; // Macros: #define screen_width [ [ UIScreen mainScreen ] bounds ].size.width #define screen_height [ [ UIScreen mainScreen ] bounds ].size.heightSwift:
let screenBounds = UIScreen.main.bounds let screen_width = screenBounds.width let screen_height = screenBounds.height
To get the screen scale:
Objective-C:
CGFloat screenScale = [[UIScreen mainScreen] scale];Swift:
let screenScale = UIScreen.main.scale
Non-retina devices have a scale of 1.0. Retina devices have a scale of 2.0 or 3.0.
Some dimensions common to all screen sizes:
Status Bar |
20 pts | |
Navigation Bar | 44 pts | |
Nav Bar/Toolbar Icon | 20 x 20 pts (transparent PNG) | |
Tab Bar | 49 pts | |
Tab Bar Icon | 30 x 30 pts (transparent PNGs) |
Points vs. Pixels
Apple introduced retina displays starting with the iPhone 4. 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 you load an image from a file whose name includes the @2x modifier, its scale property is set to 2.0. Similarly an image with a @3x modifier has a scale of 3.0. Otherwise the scale defaults to 1.0.
Retina Graphics
To support high-resolution graphics on devices with retina displays, you need @2x and @3x sized images:
@1x: |
button.png 60 x 20 |
@2x: |
button@2x.png 120 x 40 |
@3x: |
button@3x.png 180 x 60 |
To refer to an image in your code (or in Interface Builder), just use the filename of the standard sized image. iOS will automatically detect and use the @2x or @3x version if the device supports it:
Objective-C:
imageView.image = [UIImage imageNamed: @"button.png"];Swift:
imageView.image = UIImage(named: @"button.png")
Adjusting Sizes
Click here to see how to adjust View Frames and Bounds.
Additional References
- Apple Documentation: Launch Image Sizes
- Apple Documentation: Points vs. Pixels
- Apple Documentation: Supporting High-Resolution Screens
- Apple Documentation: Icon and Image Sizes