Determining screen dimensions for content

The following guide is designed to help you determine a fixed-width layout for a specific device. If your content will be shown on different sizes of iPad, you can target CSS rules and images using media queries targeted at specific devices or create a fluid layout based on percentages rather than a specific fixed width. 

In this article

Hardware pixels, CSS pixels & device pixel ratio

When Apple introduced Retina displays in iPads and iPhones, the pixel dimensions of these devices frequently were significantly larger than most existing full-size monitors while the physical screen sizes of these new devices were much smaller.  

To allow websites to display in a readable way on these screens, Apple created separate concepts for hardware pixels (sometimes referred to as display pixels or screen pixels) and CSS pixels (which are sometimes called software pixels). 

Hardware pixels are the number of individual display pixels (essentially dots of light) that make up a specific screen.  The more individual hardware pixels that a screen has in a given screen size, the higher the resolution and the clearer that display will look.   

If you are packing more pixels into a smaller space, those individual pixels will have to be smaller to fit - this means that the size of a hardware pixel can vary significantly from one device to another. 

CSS pixels, on the other hand, are designed to be roughly the same size across devices.  This allows a layout with specific CSS dimensions to be displayed consistently across screens with similar physical dimensions, but different numbers of hardware pixels making up that screen. 

For devices with high-resolution screens, manufacturers define a device pixel ratio based on their screen size and resolution.  This ratio defines how many hardware pixels make up a CSS pixel. In all of Apple’s Retina iPads to date, each CSS pixel is made up of 4 hardware pixels (2 hardware pixels tall and 2 hardware pixels wide), which translates to a device pixel ratio of 2. Older, non-Retina iPads use a device pixel ratio of 1 so hardware pixels equal CSS pixels for these devices.

Layout width

All fixed-width layouts should be based on the CSS pixel width of the device, which we have listed below for iPads currently supported by Kiosk Pro. 

For other devices, you can determine the standard CSS layout width by dividing the horizontal hardware pixel dimensions by the device pixel ratio. For example, the 11-inch iPad Pro in landscape has a hardware pixel resolution of 2388 pixels wide by 1668 pixels tall.  Dividing 2388 by 2 (the device pixel ratio for any Retina screen) results in a standard CSS layout width of 1194 pixels to be used as the base width for any content designed to be shown on that device in landscape mode.  

If you want to define a different CSS pixel width for your layout, Apple allows you to set a custom viewport using a meta viewport tag. While the viewport tag is supported in current versions of iOS and iPadOS, this may change in future versions.  For this reason, we generally recommend basing your layout on the standard CSS pixel width of the device if possible. 

High-resolution images for Retina displays

While your layout should be based on CSS pixels, you can still use high-resolution images for Retina screens.  This works by using an image based on the hardware pixel size of the screen, then using inline HTML, CSS, JavaScript or media queries to resize the image to the proper CSS pixel dimensions using 'width' and 'height' attributes.  

To continue the 11-inch iPad example above, if you wanted to set a full-width header image, this would be defined in the CSS or inline HTML as having a width of 1194 pixels.  The image file used would be double that (based on the device pixel ratio of 2 for Retina screens) with an actual width of 2388 pixels.  

More specific examples of ways to use high-resolution images on Retina displays are available here.

Specific devices

iPads with Retina displays include: 

  • 13-inch iPad Pro (M4)
    • hardware pixels = 2752 x 2064
    • CSS pixels = 1376 x 1032
    • recommended CSS layout width = 1376 pixels in landscape, 1032 pixels in portrait
  • 13-inch iPad Air (M2), 12.9-inch iPad Pro (6th gen, 5th gen, 4th gen, 3rd gen, 2nd gen, 1st gen)
    • hardware pixels = 2732 x 2048
    • CSS pixels = 1366 x 1024
    • recommended CSS layout width = 1366 pixels in landscape, 1024 pixels in portrait
  • 11-inch iPad Pro (M4)
    • hardware pixels = 2420 x 1668
    • CSS pixels = 1210 x 834
    • recommended CSS layout width = 1210 pixels in landscape, 834 pixels in portrait
  • 11-inch iPad Air (M2)
    • hardware pixels = 2360 x 1640
    • CSS pixels = 1180 x 820
    • recommended CSS layout width = 1180 pixels in landscape, 820 pixels in portrait
  • 10.9-inch iPad (10th gen), 10.9-inch iPad Air (5th gen, 4th gen)
    • hardware pixels = 2360 x 1640 in landscape
    • CSS pixels = 1180 x 820
    • recommended CSS layout width = 1180 pixels in landscape, 820 pixels in portrait
  • 11-inch iPad Pro (4th gen, 3rd gen, 2nd gen, 1st gen)
    • hardware pixels = 2388 x 1668
    • CSS pixels = 1194 x 834
    • recommended CSS layout width = 1194 pixels in landscape, 834 pixels in portrait
  • 10.5-inch iPad Air (3rd gen), 10.5-inch iPad Pro (1st/only gen)
    • hardware pixels = 2224 x 1668 in landscape
    • CSS pixels = 1112 x 834
    • recommended CSS layout width = 1112 pixels in landscape, 834 pixels in portrait
  • 10.2-inch iPad (9th gen, 8th gen, 7th gen)
    • hardware pixels = 2160 x 1620
    • CSS pixels = 1080 x 810
    • recommended CSS layout width = 1080 pixels in landscape, 810 pixels in portrait
  • 9.7-inch iPad (6th gen, 5th gen), 9.7-inch iPad Pro (1st/only), 9.7-inch iPad Air (2nd gen, 1st gen), 7.9-inch iPad mini (5th gen, 4th gen, 3rd gen, 2nd gen)
    • hardware pixels = 2048 x 1536
    • CSS pixels = 1024 x 768
    • recommended CSS layout width = 1024 pixels in landscape, 768 pixels in portrait
  • 8.3-inch iPad mini (6th gen)
    • hardware pixels = 2266 x 1488
    • CSS pixels = 1133 x 744
    • recommended CSS layout width = 1133 pixels in landscape, 744 pixels 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

If your design needs to account for the standard on-screen elements of Kiosk Pro, the height dimensions are as follows: 

  • iPad Status Bar: 40 pixels tall (20 pixels on older, non-Retina displays)
  • Address Bar: 88 pixels tall (44 pixels on older, non-Retina displays)
  • Navigation Bar: 88 pixels tall (44 pixels on older, non-Retina displays)

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