A Size Class Reference Guide

Apple introduced the concept of adaptive user interfaces in iOS 8 relying on a combination of Auto Layout and size classes. Building user interfaces that adapt to changes in size class became even more important when Apple added slide over and split screen support in iOS 9.

The problem is that I can never remember which devices support which size class in which orientation (landscape or portrait). The added slide over and split screen combinations don’t make it any easier. Finding where Apple describes the details is tricky so after a few minutes with OmniGraffle here, for future reference, is my guide:

Updated 10 Feb 2017 to include iPad Pro

Size Classes

There are two size classes that can apply to the horizontal (width) or vertical (height) dimension of an application interface:

iPhone 6 Plus and iPhone 7 Plus

The iPhone 6 Plus and iPhone 7 Plus are the only iPhone devices with a regular width in landscape orientation. The longest dimension is always regular and the shortest dimension is always compact.

Size Classes iPhone 6 Plus and iPhone 7 Plus

All Other iPhone Models

The other iPhone models have a trickier set of size classes to remember. The longest dimension of the device is regular in portrait but only compact in landscape.

Size Classes iPhone

iPad Full Screen

A full screen iPad application always has regular height and regular width size classes regardless of orientation or device.

Size Classes iPad Full Size

Note that there is no difference in size class between the largest iPad Pro and the smallest iPad Mini when the application is full screen.

iPad Split Screen and Slide Over

The multi-tasking views introduced in iOS 9 complicate the situation for the iPad. For the first time an iPad application can find it itself running with a compact horizontal size class. Another assumption that no longer holds is that the window and screen bounds will always be the same. I cover the details in an earlier post on iOS 9 slide over and split view.

iPad all models portrait

In portrait orientation a user cannot change the position of the split screen (or slide over). The primary application is slightly wider than the secondary application but both have a compact width size class.

Size Classes Split Screen Portrait

iPad and iPad Mini landscape

In landscape orientation a user can choose between two different positions for the split screen (regular/compact or compact/compact).

Size Classes Split Screen Landscape

Size Classes Split Screen Landscape

iPad Pro landscape

The iPad Pro differs from the smaller iPads in landscape. When the screen is evenly split both applications have a regular horizontal size class.

Size Classes iPad Pro Landscape

Further Reading

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

Unsubscribe at any time.
Archives Categories
comments powered by Disqus