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!
Click for larger image
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
Note:
- 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
Category: Game Design, Tutorials
In the landscape image, is the screen size right ? Shouldn’t it be 640 not 960.
Dave
Nice catch Dave – fixed now!
It sounds good ..
Nice! Thansk! XD
hi can you please share for ipad mini also, pls.
Thanks
Good news – the iPad mini screen dimensions are EXACTLY the same as for the regular iPad (nonretina). The mini just has double the resolution, so it fits into a smaller screen. All the dimensions for iPad (nonretina) apply for the iPad mini.
This was very helpful. Trying to design a mobile version of my website to load on smartphones and other portable devices. These specs are the perfect template. Thank you!
This was helpful. Thanks. If you’re designing in InDesign, setting the browser window to 960 x 1365 and zooming out to about 25% (depending on monitor size) gives a fairly close to life size view of the ipPhone5. This gives a decent quick reference during design.
These dimensions are based on the 640 x 1136 screen size minus the status, nav and tab bars. This gives 640 x 960, but my design didn’t look the same in InDesign as on my iPhone5. I found that multiplying by 1.5, for whatever reason, did the trick.
Hi guys,
Thanks for the info. Although I would like to ask a question. What if i have a UI design which does not meet the standards above? For example if my Nav bar is not 88 px height but is 270px? What is wrong in that case?
landscape toolbar is 72px. Portrait toolbar is 88px on iPhone 4/4s and iPhone 5.