应用笔记 / 经验分享 · 2013年9月4日

iPhone & iPad Basic Screen Component Dimensions – Updated For Retina

Ever since I created these diagrams showing the pixel dimensions for the most common UI components on the iPhone and iPad screens, I constantly find myself referring to them. The only problem was that I usually create the Retina art first. I got tired of having to multiply the unRetina dimensions by two, and I figured you all might too!

Here are the same diagrams, updated with Retina dimensions in parentheses:
Basics_iphone1

Click for a larger image
Basics_ipad1

Click for larger image

 

For those of you who would prefer a list instead, read on.

iPhone and iPod Touch Pixel Dimensions

Notes:

  • Retina Dimensions are given in parentheses.
  • All the dimensions for the iPhone 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 (640×960) pixels
  • Landscape 480×320 (960×640) pixels

iPhone Nav bar:

  • Portrait: 44 (88) pixels high
  • Landscape: 32 (64) pixels high

iPhone Nav bar buttons:

  • Portrait: 30 (60) pixels high
  • Landscape: 24 (48) pixels high

iPhone Nav bar button icons: about 20×20 (40×40) pixels (when in Landscape mode, it shrinks the 20×20 (40×40) pixel icon)

iPhone Toolbar: 44 (88) pixels high (does not change)

iPhone Toolbar button: 30 (60) pixels high (does not change)

iPhone Toolbar button icon: about 20×20 (40×40) pixels

iPhone Tab Bar: 49 (98) pixels high (does not change)

iPhone Tab Bar icon: about 30×30 (60×60) pixels

iPad Pixel Dimensions

iPad screen size:

  • Portrait 768×1024 (1536×2048) pixels
  • Landscape 1024×768 (2048×1536)

iPad Navigation Bar and Tool Bars: 44 (88) pixels high

iPad Nav Bar and Tool Bar buttons: 30 (60) pixels high

iPad Nav Bar and Tool Bar button icons: about 20×20 (40×40) pixels

iPad Tab Bar: 49 (98) pixels high

iPad Tab Bar icons: about 30×30 (60×60) pixels

iPad List View: 320 (640) pixels wide.  This is because when the same app is on the iPhone, the 320 (640) pixel width fits iPhone Portrait mode perfectly.