Update: A more recent chart can be found here, updated for Retina dimensions!
When I start a mockup of an iPhone/iPad app, I often need to double-check the dimensions of the iPad or iPhone screen sizes and standard components like toolbars. Really basic stuff, but I can’t keep all the exact pixel dimensions straight.
When I search online, the numbers I want are buried in tutorials or articles or *shudder* SDK documents. I usually end up interrupting Ray to ask him.
Finally, I made myself a couple of reference diagrams. Share them with other designers or developers that might want a quick reference!
Hopefully it will help someone else out there who needs a quick reference. Pass this on to anyone who might find it useful — save it and give it to designers you hire, or bookmark it for when you begin your next project!
For those of you who would prefer a list instead, read on.
iPhone and iPod Touch Pixel Dimensions
- For iPhone Retina display, all pixel dimensions are doubled.
- All the dimensions for the iPhone (not retina) are the same as for the iPod Touch.
- All pixel dimensions include highlight or stroke effects. For example, a 30-pixel high button is actually a 29-pixel high button with a 1-pixel highlight on the bottom.
iPhone screen size:
- Portrait 320×480 pixels
- Landscape 480×320 pixels
iPhone Nav bar:
- Portrait: 44 pixels high
- Landscape: 32 pixels high
iPhone Nav bar buttons:
- Portrait: 30 pixels high
- Landscape: 24 pixels high
iPhone Nav bar button icons: about 20×20 pixels (when in Landscape mode, it shrinks the 20×20 pixel icon)
iPhone Toolbar: 44 pixels high (does not change)
iPhone Toolbar button: 30 pixels high (does not change)
iPhone Toolbar button icon: about 20×20 pixels
iPhone Tab Bar: 49 pixels high (does not change)
iPhone Tab Bar icon: about 30×30 pixels
iPad Pixel Dimensions
iPad screen size:
- Portrait 768×1024 pixels
- Landscape 1024×768
iPad Navigation Bar and Tool Bars: 44 pixels high
iPad Nav Bar and Tool Bar buttons: 30 pixels high
iPad Nav Bar and Tool Bar button icons: about 20×20 pixels
iPad Tab Bar: 49 pixels high
iPad Tab Bar icons: about 30×30 pixels
iPad List View: 320 pixels wide. This is because when the same app is on the iPhone, the 320 pixel width fits iPhone Portrait mode perfectly.
Those are the notes that I find myself referring to the most; now they are all in one place! In fact, I referred to them twice for my regular work projects since making these reference lists :]
If you have any other basic pixel dimensions that you are always having to look up, please add them in the comments! In the future I may make more of these reference images, so if you have any requests please list them here.