iOS Size Classes

Quick Guide
useyourloaf.com

Version 1.3

© 2017 Keith Harrison

Introduction
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 adjust to changes in size class became even
more important when Apple added slide over and split screen
support to the iPad 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 the details in the Apple documentation is tricky so for
future reference I have collected them into this short guide.

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

• regular: meaning your interface has expansive space.

• compact: meaning your interface has only constrained space.
Note that if you are checking the size class returned by a trait
collection it may also have an unspecified value if the size class has
not been set.

Further Reading
• UITraitCollection
• Adopting Multitasking Enhancements on iPad
• WWDC 2015 Getting Started with Multitasking on iPad in iOS 9

useyourloaf.com Page 2 Version 1.3

iPhone Size Classes
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.

regular Portrait
height
compact
Landscape
height

compact regular
width width

iPhone 6 Plus and iPhone 7 Plus

The other iPhone models have a trickier set of size classes to

remember. The longest dimension of the device is regular in
portrait but compact in landscape.

regular Portrait
height
compact Landscape
height

compact compact
width width

All other iPhone models.


useyourloaf.com Page 3 Version 1.3

iPad Size Classes - Full Screen
A full screen iPad application always has regular height and
regular width size classes regardless of orientation or device.

regular
Portrait
height regular
Landscape
height

regular regular
width width

All models of iPad

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.


useyourloaf.com Page 4 Version 1.3

iPad Split Screen - Portrait
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.
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.

regular Primary Secondary

height App App

compact compact
width width

iPad in portrait (all models)


useyourloaf.com Page 5 Version 1.3

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

regular Primary Secondary

App App
height

regular compact
width width

iPad landscape (regular/compact)

regular Primary Secondary

height App App

compact compact
width width

iPad (except 12.9-inch) landscape (compact/compact)


useyourloaf.com Page 6 Version 1.3

iPad Pro 12.9-inch Split Screen - Landscape
The iPad Pro 12.9-inch model differs from the smaller iPads in
landscape. When the screen is evenly split both applications have
a regular horizontal size class.

regular Primary Secondary

height App App

regular regular
width width

iPad Pro 12.9-inch landscape (regular/regular)


useyourloaf.com Page 7 Version 1.3

Summary
iPhone

C Plus
R C
C R
C
R = Regular C = Compact
iPad

R R

R C C

R R

R R C

R iPad Pro
R 12.9-inch

C C R R

useyourloaf.com Page 8 Version 1.3

Responding To Changes
UIContentContainer Protocol
Use to allow a view controller to adapt its contents to size and trait
changes. All UIViewController and UIPresentationController objects
provide default implementations. Always call super to allow UIKit to
perform any default behaviours.
- willTransitionToTraitCollection:withTransitionCoordinator:

Called when the view controller’s trait collection is changed by its

parent.
Objective-C
- (void)willTransitionToTraitCollection:(UITraitCollection *)
newCollection withTransitionCoordinator:
(id<UIViewControllerTransitionCoordinator>)coordinator

Swift
func willTransition(to newCollection: UITraitCollection,
with coordinator: UIViewControllerTransitionCoordinator)

- viewWillTransitionToSize:withTransitionCoordinator:

Called when the view controller’s view size is changed by its parent.
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:
(id<UIViewControllerTransitionCoordinator>)coordinator

Swift
func viewWillTransition(to size: CGSize,

     with coordinator: UIViewControllerTransitionCoordinator)

useyourloaf.com Page 9 Version 1.3

UITraitEnvironment Protocol
Classes that adopt this protocol implement the traitCollection
property and the traitCollectionDidChange method. Adopted by
UIScreen, UIWindow, UIViewController, UIPresentationController
and UIView.
Note: If you need to perform custom view controller animations in
response to trait changes use
willTransitionToTraitCollection:withTransitionCoordinator:.

traitCollection

A read-only property for the trait collection of view controllers and

views.
Objective-C
@property(nonatomic, readonly) UITraitCollection *traitCollection

Swift
var traitCollection: UITraitCollection { get }

- traitCollectionDidChange:

Called when the interface environment changes for a view controller

or view. Don’t forget to call super in your implementation.
Objective-C
- (void)traitCollectionDidChange:(UITraitCollection
*)previousTraitCollection

Swift
func traitCollectionDidChange(_ previousTraitCollection:
UITraitCollection?)

useyourloaf.com Page 10 Version 1.3

UITraitCollection
A trait collection describes the following environmental properties
(traits) of an interface:

• displayScale A CGFloat indicating the display scale: non-Retina

(1.0), retina (2.0), unspecified (0.0). Default is unspecified.
• horizontalSizeClass A UIUserInterfaceSizeClass value, default
is unspecified.
• userInterfaceIdiom A UIUserInterfaceIdiom value, default is
unspecified.
• verticalSizeClass A UIUserInterfaceSizeClass value, default is
unspecified.
• forceTouchCapability A UIForceTouchCapability value
indicating if 3D Touch is available (available in iOS 9).
• layoutDirection A UITraitEnvironmentLayoutDirection value
(available in iOS 10)
• preferredContentSizeCategory A UIContentSizeCategory
(available in iOS 10).
• displayGamut A UIDisplayGamut value (available in iOS 10).
Available through the traitCollection property of any class that
adopts the UITraitEnvironment protocol. To respond to changes
override traitCollectionDidChange.


useyourloaf.com Page 11 Version 1.3

UIUserInterfaceSizeClass
Objective-C
UIUserInterfaceSizeClassUnspecified
UIUserInterfaceSizeClassCompact
UIUserInterfaceSizeClassRegular

Swift
unspecified
compact
regular

UIUserInterfaceIdiom
Objective-C
UIUserInterfaceIdiomUnspecified
UIUserInterfaceIdiomPhone
UIUserInterfaceIdiomPad

Swift
unspecified
phone
pad

UIForceTouchCapability
Objective-C
UIForceTouchCapabilityUnknown
UIForceTouchCapabilityUnavailable
UIForceTouchCapabilityAvailable

Swift
unknown
unavailable
available

useyourloaf.com Page 12 Version 1.3

UIDisplayGamut
Objective-C
UIDisplayGamutUnspecified
UIDisplayGamutSRGB
UIDisplayGamutP3

Swift
unspecified
SRGB
P3

UITraitEnvironmentLayoutDirection
Objective-C
UITraitEnvironmentLayoutDirectionUnspecified
UITraitEnvironmentLayoutDirectionLeftToRight
UITraitEnvironmentLayoutDirectionRightToLeft

Swift
unspecified
leftToRight
rightToLeft

UIContentSizeCategory
Objective-C
UIContentSizeCategoryUnspecified
UIContentSizeCategorySmall
UIContentSizeCategoryMedium
UIContentSizeCategoryLarge
UIContentSizeCategoryExtraSmall
UIContentSizeCategoryExtraLarge
UIContentSizeCategoryExtraExtraLarge
UIContentSizeCategoryExtraExtraExtraLarge
UIContentSizeCategoryAccessibilityMedium
UIContentSizeCategoryAccessibilityLarge
UIContentSizeCategoryAccessibilityExtraLarge
UIContentSizeCategoryAccessibilityExtraExtraLarge
UIContentSizeCategoryAccessibilityExtraExtraExtraLarge

Swift
unspecified
small
medium

useyourloaf.com Page 13 Version 1.3

large
extraSmall
extraLarge
extraExtraLarge
extraExtraExtraLarge
accessibilityMedium
accessibilityLarge
accessibilityExtraLarge
accessibilityExtraExtraLarge
accessibilityExtraExtraExtraLarge


useyourloaf.com Page 14 Version 1.3

Not yet a subscriber?
For regular articles on iOS development delivered direct to your
inbox follow the link below and sign up. Unsubscribe at any time.

useyourloaf.com/newsletter

useyourloaf.com Page 15 Version 1.3