Size Class: What Is It, Compact and Regular Size Classes in iOS
Size Class is an iOS mechanism for adaptive layout that divides all devices into two categories per axis: Compact (narrow/short) and Regular (wide/tall). Combinations of these values determine how the interface displays on iPhone, iPad, Mac Catalyst, and CarPlay. According to Apple Human Interface Guidelines, 2024, Size Class allows building a single storyboard for all devices using Auto Layout and UITraitCollection. The system works on all iOS devices since iOS 8.
Key Takeaways
- Size Class is an iOS size classification system with two values per axis: Compact (compressed) and Regular (full-size).
- Horizontal Size Class on iPhone in portrait orientation is Compact, on iPad — Regular. Vertical is Regular on all iPhones except SE.
- UITraitCollection is a programmatic interface for getting the current Size Class and responding to trait collection changes at runtime.
- Interface Builder allows configuring constraints and element visibility for each Size Class combination with the Vary for Traits tool.
- Adaptive layout with Size Class replaces separate storyboards for iPhone and iPad — one file adapts to all devices.
What is Size Class?
Size Class is an abstract screen classification in iOS, introduced by Apple in iOS 8 to unify adaptive layout. Instead of checking a specific device model, Size Class defines two characteristics: available horizontal and vertical space. Each characteristic takes one of two values — Compact (limited space) or Regular (sufficient space). The combination of these values forms a trait collection, which is passed to all interface elements.
History and Purpose
Before Size Class, developers created separate storyboards for iPhone and iPad or used UI_USER_INTERFACE_IDIOM() checks in code. This led to code duplication, bloated storyboards, and difficulties in supporting new screen sizes. Size Class solved the problem by offering a universal system: the developer configures the interface for 4 Compact/Regular combinations, and iOS automatically selects the right one. With the advent of Split View on iPad and various iPhone sizes, the system became indispensable for adaptive layout.
How Size Class Works
Size Class is calculated by iOS based on the current screen width and height, taking into account orientation and multitasking. The values are not tied to specific pixels — it is a logical category. For example, iPhone 16 Pro in portrait has horizontal Compact and vertical Regular. The same iPhone in landscape — Compact on both axes. iPad in Split View with an app at 1/3 of the screen gets horizontal Compact, although in full-screen mode it is Regular. The system automatically updates the Size Class when orientation or Split View changes.
What Size Classes Are There
Size Class uses four combinations of two values on two axes. Each combination has its own application depending on the device type and its orientation. Understanding these combinations is the foundation of designing an adaptive interface for iOS. The system covers all current Apple devices: iPhone, iPad, Mac Catalyst, and CarPlay. Apple recommends starting design with the wAny hAny combination (base layout) and refining for specific combinations.
Four Size Class Combinations
wCompact hRegular — portrait iPhone (except Plus/Max in some cases). wCompact hCompact — landscape iPhone SE/6/7/8. wRegular hRegular — full-screen iPad in any orientation, iPhone Plus/Max in landscape. wRegular hCompact — iPad in landscape with narrow content. Each combination determines which constraints and elements are active. The developer can set the appearance for each combination separately in Interface Builder.
Size Class for Mac Catalyst
On Mac Catalyst, Size Class is always wRegular hRegular — full-size interface. This means the Mac version of an iPad app gets maximum space. The developer can use additional checks via UIScreen.traitCollection.userInterfaceIdiom to distinguish Mac from iPad. Size Class on Mac works stably, but Catalyst apps often require additional adaptation for mouse and keyboard beyond Size Class.
How Size Class Affects Adaptive Layout
Size Class determines which Auto Layout constraints are active, which interface elements are visible, and how subviews are arranged. The developer can set different constraints for different Size Classes, and iOS automatically switches them when the trait collection changes. For example, on iPad (wRegular hRegular) a table with detail displays in Master-Detail, on iPhone (wCompact hRegular) — in Navigation Stack. This is the main scenario for adaptive layout with Size Class.
Setting and Removing Constraints
In Interface Builder, the developer selects a Size Class combination via the Vary for Traits button and adds constraints that should apply only for that combination. Constraints set for wAny hAny always apply. Constraints set for a specific combination activate only when the Size Class matches. If no special constraints are set for a combination, base constraints are used. When the Size Class changes, iOS animates the transition between constraint sets.
Hiding and Showing Elements
The Installed flag in Interface Builder allows hiding elements for specific Size Classes. The developer marks an element as Uninstalled for the selected combination. For example, a Details button is visible only on iPad (wRegular hRegular), and hidden on iPhone. This is simpler than managing isHidden in code. For programmatic hiding, override traitCollectionDidChange or use the willTransition method, checking the current Size Class.
Using Size Class in Interface Builder
Interface Builder provides the visual Vary for Traits tool for working with Size Class. The developer selects the desired combination (width and height), and Interface Builder shows a screen preview for that combination. All constraint, size, font, and visibility changes made in this mode apply only to the selected Size Class. Exiting the mode saves the settings. This approach replaces the need to write adaptation code for different devices.
Step-by-Step Work in Interface Builder
To configure Size Class in Interface Builder, the developer opens a storyboard, selects the view controller, and clicks the Vary for Traits button in the bottom panel. Then selects Width (Compact, Regular, or Any) and Height (Compact, Regular, or Any). The interface switches to editing mode for the selected combination. All constraint changes, adding or removing elements apply only to this combination. After finishing the setup, the developer exits the mode — changes are saved for the specific Size Class combination.
Best Practices
Apple recommends starting with a base layout for wAny hAny (the base combination covering all devices). Then refine the layout for problematic combinations: wCompact hRegular (portrait iPhone) and wRegular hRegular (iPad). It is not recommended to configure every combination — only those where the layout breaks. Excessive configuration complicates maintenance. For precise font sizing, use Dynamic Type instead of Size Class: fonts adapt automatically to screen size.
Size Class in Code: UITraitCollection
UITraitCollection is an iOS class that contains the current Size Class and other environment characteristics (force touch, display scale, user interface idiom). Each UIView and UIViewController has its own traitCollection, inherited from the parent. The developer gets Size Class via traitCollection.horizontalSizeClass and traitCollection.verticalSizeClass, which return UIUserInterfaceSizeClass (.compact, .regular, or .unspecified). Size Class changes are tracked by overriding traitCollectionDidChange.
Example: Switching Layout in Code
Consider an example of adapting UICollectionView layout to Size Class. On iPad (wRegular hRegular) use UICollectionViewCompositionalLayout with two columns, on iPhone (wCompact hRegular) — with one. The code checks the horizontal Size Class and selects the appropriate layout. On rotation or Split View transition, iOS calls traitCollectionDidChange, and the controller switches the layout with animation.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Responding to Trait Collection Changes
The traitCollectionDidChange method is called on any Size Class change: device rotation, entering/exiting Split View, connecting an external display. In this method, the developer updates the layout, reloads collections, updates constraint priorities, or changes element visibility. It is important to check whether the Size Class actually changed, not another characteristic: compare traitCollection.horizontalSizeClass with previousTraitCollection?.horizontalSizeClass. Optimization prevents unnecessary redraws when force touch or display scale changes.
Size Class Features on Different Devices
Different Apple devices have different Size Class combinations, and the developer must account for these features. iPhone in portrait — wCompact hRegular, in landscape — model dependent: iPhone SE/6/7/8 (wCompact hCompact), iPhone X and newer (wCompact hCompact or wCompact hRegular depending on content). iPad in full-screen mode — wRegular hRegular, in Split View — can be wCompact hRegular (1/3 screen) or wRegular hRegular (2/3 screen). Mac Catalyst — always wRegular hRegular.
iPhone: All Sizes
On iPhone, Size Class is stable for most models, but there are nuances. iPhone Plus (6+, 7+, 8+) and Max (X, XS, 11 Pro, 13–16 Pro Max) in landscape have wRegular hCompact — like iPad mini. This allows placing content in two columns on large iPhones in landscape. iPhone SE (1st–3rd generation) in landscape — wCompact hCompact. Vertical Size Class on all iPhones in portrait is Regular, except iPhone SE in landscape where it is Compact. Horizontal is always Compact for portrait and landscape (except Plus/Max in landscape).
iPad and Split View
iPad in full-screen mode — wRegular hRegular, providing maximum layout flexibility. In Split View, behavior changes: if the app occupies 1/3 of the screen (Slide Over or Split at 1/3), horizontal Size Class becomes Compact, although vertical remains Regular. At 2/3 screen — wRegular hRegular. The developer should test the interface in all Split View modes, as Size Class changes dynamically. Apple recommends using Size Class together with UISplitViewController for consistent behavior on iPad.
Frequently Asked Questions
How is Size Class different from a breakpoint in CSS?
Size Class is a discrete system with 4 combinations, while CSS breakpoints are continuous with an arbitrary number of points. Size Class abstracts from specific screen sizes, grouping devices by behavior. CSS breakpoints are tied to pixels, Size Class — to logical Compact/Regular categories.
Why does iPhone Plus in landscape have Regular horizontal Size Class?
iPhone Plus/Max in landscape has enough screen width to display content in two columns (like iPad mini). Apple assigns horizontal Regular so the developer can use multi-column layout without additional checks. This is an exception to the Compact rule for iPhone.
Can Size Class be changed programmatically?
Size Class is determined by iOS based on actual device characteristics and cannot be changed from app code. The developer can only react to the current value. System UI can override Size Class for system elements, but this is impossible in the app.
How does Size Class work with SwiftUI?
SwiftUI does not use Size Class directly — instead, the developer uses @Environment(\.horizontalSizeClass) modifier to read the current value. SwiftUI offers higher-level tools: Size Classes and AnyLayout with Layout protocol for adaptive layout.
Does Size Class update when connecting an external monitor?
Yes, when connecting an external display via Stage Manager or Sidecar, iOS updates Size Class. The external monitor usually gets wRegular hRegular, while the main screen retains its Size Class. traitCollectionDidChange is called for windows on each screen independently.
Summary
- Size Class is an iOS screen classification system with two Compact/Regular values per axis, totaling 4 combinations.
- iPhone in portrait — wCompact hRegular. iPad in full-screen mode — wRegular hRegular. iPhone Plus/Max in landscape — wRegular hCompact.
- Interface Builder provides Vary for Traits for visual configuration of constraints and visibility for each Size Class.
- UITraitCollection is a programmatic API for reading Size Class via horizontalSizeClass and verticalSizeClass. Changes are tracked in traitCollectionDidChange.
- Split View on iPad dynamically changes Size Class: at 1/3 screen horizontal becomes Compact, requiring layout adaptation.
- SwiftUI provides @Environment(\.horizontalSizeClass) for reading Size Class and AnyLayout for switching between layouts at runtime.
- It is recommended to start with layout for wAny hAny, then adapt for wCompact hRegular (iPhone) and wRegular hRegular (iPad), without overloading the remaining combinations.
We will develop a mobile application turnkey
IT Sectr creates iOS and Android applications for startups and businesses since 2017. We will advise you and propose the best solution.
Read also