Determining screen dimensions for content

The exact screen size depends on the device you are designing for and how you set up Kiosk Pro, but isn’t too hard to figure out.

Device dimensions

Most iOS kiosk projects use iPads, which come in several pixel dimensions:

  • 12.9-inch iPad Pro (2018, 2017, 2015)
    • 2732 x 2048 in landscape
    • 2048 x 2732 in portrait
  • 11-inch iPad Pro (2018)
    • 2388 x 1668 in landscape
    • 1668 x 2388 in portrait
  • 10.5-inch iPad Air (2019), 10.5-inch iPad Pro (2017)
    • 2224 x 1668 in landscape
    • 1668 x 2224 in portrait
  • 10.2-inch iPad (2019)
    • 2160 x 1620 in landscape
    • 1620 x 2160 in portrait
  • 9.7-inch iPad (2018, 2017), 9.7-inch iPad Pro (2016), iPad Air 2 (2014), iPad Air (2013), iPad 4 (late 2012), iPad 3 (early 2012), iPad mini (5th generation, 2019), iPad mini 4 (2015), iPad mini 3 (2014), iPad mini 2 (2013),
    • 2048 x 1536 in landscape
    • 1536 x 2048 in portrait

In addition, older iPads with non-Retina screens may still be in use:

  • 9.7-inch iPad 2 (2011), iPad mini (2012)
    • 1024 x 768 in landscape
    • 768 x 1024 in portrait

If you do not see your device above, a full list of iOS devices, including screen size in pixels, is maintained here.  If you need help identifying your iPad, click here.  

Navigation element dimensions

iPad Status Bar:

  • 20 pixels non-Retina display
  • 40 pixels Retina or 12.9-inch Pro display

Address Bar:

  • 44 pixels non-Retina display
  • 88 pixels Retina or 12.9-inch Pro display

Navigation Bar:

  • 44 pixels non-Retina display
  • 88 pixels Retina or 12.9-inch Pro display

Adding it all up

As an example, let's say we have a project using an iPad Air with all three display bars enabled:

  1. Start with the base size of the Retina iPad screen - 2048 x 1536 pixels. This will be modified based on which display bars you're using.
  2. For the iPad status bar, subtract 40 pixels (status bar height on Retina) from the Retina screen height (1536 pixels).
  3. For the address bar, subtract 88 pixels (address bar height on Retina) from the previous result.
  4. The navigation bar (88 pixels on Retina) works slightly differently depending on whether you are viewing a webpage or a PDF:
    • For a web page, it overlays content rather than pushing it down the screen like the status and address bars do. If you are creating a longer page, content will simply scroll and the Navigation Bar will not need to be taken into consideration (beyond possibly thinking about what will appear "above the fold"). However, if you are designing a static page view not meant to scroll (such as an initial splash screen or a homepage navigation menu), you will not subtract the 88 pixels and just be aware that the page will be covered and account for this in your design, making sure that the bar will not overlap important content.
    • For a PDF, the Navigation Bar does not overlay content, but instead occupies its own screen real estate. For ideal sizing of PDF's, you will simply subtract the 88 pixels for the Navigation Bar if you choose to use it.

In this example, your web page presentation would have an on-screen dimension of 2048 x 1408, of which you would see 2048 x 1320 (with the bottom 88 pixels covered by the navigation bar). 

Finally, if you are designing a project for a Retina display, this article describing the difference between display pixels and CSS pixels is excellent.

Still stuck? How can we help? How can we help?