I almost didn’t post this, since there’s really only one dimension that’s different – the height of the iPhone screen. However, after the sixth time of having to look it up online, I knew we needed a new diagram – so here you go!
I only included retina dimensions for the iPhone 5 since there are no unRetina iPhone 5s. If you need unRetina iPhone dimensions, check out this post. It makes you wonder – how much longer will we even have to support unRetina devices?
For those of you who would prefer a list instead, read on.
iPhone 5 Pixel Dimensions
- All pixel dimensions include highlight or stroke effects. For example, a 60-pixel high button is actually a 58-pixel high button with a 2-pixel highlight on the bottom.
iPhone 5 screen size:
- Portrait 640×1136 pixels
- Landscape 1136×640 pixels
iPhone 5 Nav bar:
- Portrait: 88 pixels high
- Landscape: 64 pixels high
iPhone 5 Nav bar buttons:
- Portrait: 60 pixels high
- Landscape: 48 pixels high
iPhone 5 Nav bar button icons: about 40×40 pixels (when in Landscape mode, it shrinks the 40×40 pixel icon)
iPhone 5 Toolbar: 88 pixels high (does not change)
iPhone 5 Toolbar button: 60 pixels high (does not change)
iPhone 5 Toolbar button icon: about 40×40 pixels
iPhone 5 Tab Bar: 98 pixels high (does not change)
iPhone Tab Bar icon: about 60×60 pixels