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 three dimensions:

  • 12.9-inch iPad Pro
    • 2732 x 2048 in landscape
    • 2048 x 2732 in portrait
  • models with Retina display, including the 9.7-inch iPad Pro, iPad Air 2, iPad Air, iPad4, iPad3, iPad Mini with Retina display
    • 2048 x 1536 in landscape
    • 1536 x 2048 in portrait
  • models without Retina display, including the iPad2, iPad Mini
    • 1024 x 768 in landscape
    • 768 x 1024 in portrait

A full list of iOS devices, including screen size in pixels, is maintained 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?