iPhone 5 Basic Screen Component Dimensions

This post first appeared on www.vickiwenderlich.com

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

22 thoughts on “iPhone 5 Basic Screen Component Dimensions

    • vwenderlich says:

      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.

  1. John says:

    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!

  2. mike says:

    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.

  3. Nebeason says:

    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?

    • robV says:

      i should add, I dont have an iPhone 5, but when i put vernier calipers against an iPhone 4, the reading is exactly 75mm x 50mm

      The official specs for that are 960 x 640px @ 330 ppi, which resolves to 73.89 x 49.26, which isn’t perfectly right.

      So naturally i’m hestitant to calculate for 1136 ( or 1096 if my stencil is going to be laser cut for the actual drawing area below the everpresent staus bar )

      the ppi seems to be 325, not the quoted 330

      The internet is filled with pixel dimensions, which is fine if you’re an artist purely in the digital domain, but useless if you want to work with paper.

  4. Hrvoje says:

    does it need to be designed in 300 DPI in photoshop? with that dimensions if for instance i would only like to have it in portrait mode?

    thnx
    H

    • vwenderlich says:

      DPI only matters in printed materials – it does not matter for screens. The ONLY THING that matters is the total pixels, which is why the dimensions are given in pixels. I hope that helps!

  5. Hrvoje says:

    i appreciate you getting back Vicki. i will then develop this in the sizes you mentioned here and then for iphone4 and 4s i would just need to adjust the screen size if i’m correct?

  6. Hrvoje says:

    i appreciate it. and if i want crisp graphic like i see some people on behance or dribbble with their polished and sharp edges i would need to develop all of this in illustrator right?

  7. DR says:

    Vicki – Can I creat a custom button that is wider than 60px on the tab bar or above the tab bar (main screen)? I need to accomodate a text labels that are wider than 60px.

    Also, I need to create a grid of square frames (3 by 4) on the main screen (between rab bar and navigation bar). Would like to make them as large as possible. What dimmensions can I use? User’s will click these frames to add images on the screen.

    Thanks,

    -DR

Leave a Reply

Your email address will not be published. Required fields are marked *

X