Apple Human Interface Guidelines

Layout & Breakpoints

Apple uses size classes in a view’s trait environment to adapt layouts across varying widths and heights, including rotation and multitasking.

8 size classesTrait-Based Layout

Supported Devices

iPhone

iPad

Mac

Overview Colors Typography Spacing Shape Motion Elevation Layout Customization Content Design Glossary Components Symbols Patterns Inputs App Icons Materials System Localization Accessibility Platforms

Apple Size Classes

Apple uses size classes in a trait environment to create adaptive layouts. Size classes describe the horizontal (width) and vertical (height) characteristics of a view.

Compact Width: Narrow layouts that favor single-column content.
Regular Width: Wider layouts that can support multi-column content.
Compact Height: Short layouts that should reduce vertical chrome.
Regular Height: Taller layouts with standard navigation and spacing.

Key Principle: Size classes are independent of specific device sizes. Design for trait combinations and be ready for traits to change with rotation and multitasking.

Size Class Basics

Use width and height traits to adapt layouts without relying on fixed device breakpoints.

Compact Width

iPhone portrait iPad Slide Over iPad 1/3 Split View Small Mac windows

Use single-column layouts, tab bars for navigation, and full-width content. Avoid sidebars and multi-pane layouts.

Regular Width

iPad full screen iPad 2/3 or 1/2 Split View iPhone Plus/Max landscape Mac windows

Enable sidebars, split views, and multi-column layouts. Use NavigationSplitView for master-detail patterns.

Compact Height

iPhone landscape Short Mac windows

Minimize toolbars and navigation bars. Consider hiding non-essential UI. Prioritize content over chrome.

Regular Height

iPhone portrait iPad any orientation Most Mac windows

Use full navigation bars, standard spacing, and don't compress vertical content.

Size Class Matrix

Compact Width

Regular Width

Regular Height

Compact × Regular

iPhone portrait (most common) iPad Slide Over iPad 1/3 Split View

This is the classic mobile layout. Use tab bars, stacked navigation, and scrolling lists. NavigationStack is ideal here.

Regular × Regular

iPad full screen (any orientation) iPad 2/3 Split View Large Mac windows

The most spacious layout. Use NavigationSplitView with 2-3 columns, show toolbars, enable keyboard shortcuts.

Compact Height

Compact × Compact

iPhone landscape (non-Plus/Max models)

Space is very limited. Hide navigation bars when scrolling, use compact controls, consider landscape-specific layouts.

Regular × Compact

iPhone Plus/Max landscape Wide but short Mac windows

Wide but vertically constrained. Keep sidebars but minimize vertical UI. Good for media playback controls.

Key Principles

Design for traits, not specific devices or screen sizes.
Size classes can change with rotation, multitasking, or window resizing.
Use Auto Layout and size-class-specific constraints to adapt layouts.
Always test your app with different size class combinations.
Size classes are independent of point dimensions—respond to traits, not pixels.
In SwiftUI, use @Environment(\.horizontalSizeClass) and @Environment(\.verticalSizeClass).
In UIKit, access traitCollection.horizontalSizeClass and traitCollection.verticalSizeClass.

Device Reference & Implementation

C= Compact

R= Regular

Format:Width × Height

iPhone

iPhone SE (3rd gen)

4.7" display, smallest current iPhone

Portrait

C×R

Landscape

C×C

iPhone 15 / 15 Pro

6.1" display, standard size class behavior

Portrait

C×R

Landscape

C×C

iPhone 15 Plus / 15 Pro Max

6.7" display, landscape gets Regular width—unique among iPhones

Portrait

C×R

Landscape

R×C

iPhone 16 / 16 Pro

6.1"-6.3" display, standard size class behavior

Portrait

C×R

Landscape

C×C

iPhone 16 Plus / 16 Pro Max

6.7"-6.9" display, landscape gets Regular width

Portrait

C×R

Landscape

R×C

iPad

iPad mini (6th gen)

8.3" display, Regular in all orientations

Portrait

R×R

Landscape

R×R

iPad (10th gen)

10.9" display, base iPad model

Portrait

R×R

Landscape

R×R

iPad Air (M2)

10.9" or 13" display, both sizes Regular×Regular

Portrait

R×R

Landscape

R×R

iPad Pro 11"

11" Liquid Retina display, M4 chip

Portrait

R×R

Landscape

R×R

iPad Pro 13"

13" Ultra Retina XDR display, largest iPad

Portrait

R×R

Landscape

R×R

Mac

Size classes depend on window size. Apps can be resized to any combination.

Mac windows can be resized freely, so apps may experience any size class combination. Design for all four combinations.

iPad & Mac Multitasking

Full Screen

App occupies entire screen

Primary:Regular × Regular

Available on: iPad, Mac

Slide Over

Floating narrow window over another app

Primary:Compact × Regular

Available on: iPad

Split View 1/2

Two apps share screen equally

Primary:Regular × Regular

Secondary:Regular × Regular

Available on: iPad (landscape), Mac

Split View 2/3

Primary app takes 2/3 of screen

Primary:Regular × Regular

Secondary:Compact × Regular

Available on: iPad (landscape)

Split View 1/3

Primary app takes 1/3 of screen

Primary:Compact × Regular

Secondary:Regular × Regular

Available on: iPad (landscape)

Stage Manager (iPad)

Resizable overlapping windows

Primary:Regular × Regular

Available on: iPad Pro, iPad Air (M1+)

SwiftUI Layout Patterns

horizontalSizeClass == .regular

struct AdaptiveNavigation: View {
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            NavigationSplitView {
                SidebarContent()
            } detail: {
                DetailContent()
            }
        } else {
            TabView {
                // Tab items...
            }
        }
    }
}

Use cases:Primary app navigationMaster-detail interfacesSettings screens

Apple Size Classes

Apple uses size classes in a trait environment to create adaptive layouts. Size classes describe the horizontal (width) and vertical (height) characteristics of a view.

Compact Width: Narrow layouts that favor single-column content.
Regular Width: Wider layouts that can support multi-column content.
Compact Height: Short layouts that should reduce vertical chrome.
Regular Height: Taller layouts with standard navigation and spacing.

Key Principle: Size classes are independent of specific device sizes. Design for trait combinations and be ready for traits to change with rotation and multitasking.

Device Reference & Implementation

C= Compact

R= Regular

Format:Width × Height

iPhone

iPhone SE (3rd gen)

4.7" display, smallest current iPhone

Portrait

C×R

Landscape

C×C

iPhone 15 / 15 Pro

6.1" display, standard size class behavior

Portrait

C×R

Landscape

C×C

iPhone 15 Plus / 15 Pro Max

6.7" display, landscape gets Regular width—unique among iPhones

Portrait

C×R

Landscape

R×C

iPhone 16 / 16 Pro

6.1"-6.3" display, standard size class behavior

Portrait

C×R

Landscape

C×C

iPhone 16 Plus / 16 Pro Max

6.7"-6.9" display, landscape gets Regular width

Portrait

C×R

Landscape

R×C

iPad

iPad mini (6th gen)

8.3" display, Regular in all orientations

Portrait

R×R

Landscape

R×R

iPad (10th gen)

10.9" display, base iPad model

Portrait

R×R

Landscape

R×R

iPad Air (M2)

10.9" or 13" display, both sizes Regular×Regular

Portrait

R×R

Landscape

R×R

iPad Pro 11"

11" Liquid Retina display, M4 chip

Portrait

R×R

Landscape

R×R

iPad Pro 13"

13" Ultra Retina XDR display, largest iPad

Portrait

R×R

Landscape

R×R

Mac

Size classes depend on window size. Apps can be resized to any combination.

Mac windows can be resized freely, so apps may experience any size class combination. Design for all four combinations.

iPad & Mac Multitasking

Full Screen

App occupies entire screen

Primary:Regular × Regular

Available on: iPad, Mac

Slide Over

Floating narrow window over another app

Primary:Compact × Regular

Available on: iPad

Split View 1/2

Two apps share screen equally

Primary:Regular × Regular

Secondary:Regular × Regular

Available on: iPad (landscape), Mac

Split View 2/3

Primary app takes 2/3 of screen

Primary:Regular × Regular

Secondary:Compact × Regular

Available on: iPad (landscape)

Split View 1/3

Primary app takes 1/3 of screen

Primary:Compact × Regular

Secondary:Regular × Regular

Available on: iPad (landscape)

Stage Manager (iPad)

Resizable overlapping windows

Primary:Regular × Regular

Available on: iPad Pro, iPad Air (M1+)

SwiftUI Layout Patterns

horizontalSizeClass == .regular

struct AdaptiveNavigation: View {
    @Environment(\.horizontalSizeClass) var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            NavigationSplitView {
                SidebarContent()
            } detail: {
                DetailContent()
            }
        } else {
            TabView {
                // Tab items...
            }
        }
    }
}

Use cases:Primary app navigationMaster-detail interfacesSettings screens

Layout & Breakpoints

Apple Size Classes

Size Class Basics

Compact Width

Regular Width

Compact Height

Regular Height

Key Principles

Device Reference & Implementation

iPhone

iPad

Mac

iPad & Mac Multitasking

Full Screen

Slide Over

Split View 1/2

Split View 2/3

Split View 1/3

Stage Manager (iPad)

SwiftUI Layout Patterns

Adaptive Navigation

Responsive Grid

Compact Height Adaptation

NavigationSplitView

Layout & Breakpoints

Apple Size Classes

Size Class Basics

Compact Width

Regular Width

Compact Height

Regular Height

Key Principles

Device Reference & Implementation

iPhone

iPad

Mac

iPad & Mac Multitasking

Full Screen

Slide Over

Split View 1/2

Split View 2/3

Split View 1/3

Stage Manager (iPad)

SwiftUI Layout Patterns

Adaptive Navigation

Responsive Grid

Compact Height Adaptation

NavigationSplitView