Foldables & Multi-state Devices cheat sheet

Designing interfaces that adapt across closed, open and changing device states.

Material1 rules, updated 9 Oct 2026Verified 9 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

In 30 seconds

Design one responsive interface
Keep the same task and state when the device opens
Use the space available, not fixed device layouts
Keep the fold clear of controls and text
Test closed, open and half-open

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

What makes foldables different

Folding screens

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to Foldable · Touch interfaces

A folding device is two viewports on one device. People switch between them in the middle of a task.

Schematic, not to scale. Choose Foldable above, then Closed or Open, to see it change. The dashed line is the fold.

Mobile: No separate value. Use the nearest one.
Tablet: No separate value. Use the nearest one.
Laptop: No separate value. Use the nearest one.
Desktop: No separate value. Use the nearest one.
Large desktop: No separate value. Use the nearest one.
Foldable, closed: A compact layout
Foldable, open: The same layout, expanded

Depends on product type, density, touch or pointer, information hierarchy, your design system, the content itself, accessibility needs, the width actually available. A starting point, not a correct value.

Why?

The two screens differ in width and shape, and the switch is instant. The layout has to work in both and keep its place across the change.

Common mistakes (5)

Everything scaled up in proportion to fill the open screen.
A completely different layout when open, so people have to find everything again.
More content added when open only because there is room.
A control or a line of text placed across the fold.
Opening the device resets the screen to its start.

Official guidanceMaterial

Material
The differences in screen size and aspect ratio of folded and unfolded screens can be substantial, requiring alternative layouts.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable
Material
Position dialog boxes and pop-up menus so they do not overlay the fold. When the device is half opened, split content into two areas.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable
Material
The app must preserve and restore its state as the device folds or unfolds. The unfolded screen should show the same content, plus complementary content.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable

Closed and open

Closed: a compact width layout. One pane, with the bar at the side.

Schematic, not to scale. Opening keeps the selected item and the bar at the side, and adds the detail beside the list. The dashed line is the fold.

iPhone Duo, closed: Outer display. 5.4 inch, 1398 × 2034 pixels at 460 ppi.; Apple’s size class Compact width; Shortcut’s readingClosest to the Mobile reference. It is wider and shorter than other iPhone displays.
iPhone Duo, open: Inner folding display. 7.6 inch, 1878 × 2670 pixels at 430 ppi.; Apple’s size class Regular width; Shortcut’s readingClosest to the Tablet reference.

Key takeawayThose are physical pixels, not a CSS width. Do not set a breakpoint at 1398 px.

Why pixels are not the viewport

These are physical pixels. A browser reports a much smaller CSS width, because each CSS pixel is drawn with several physical ones. Apple's specifications page gives no CSS viewport width, so Shortcut gives none either.

What Apple says

Apple’s guidance for iPhone Duo, restated. Lines marked Shortcut takeaway are Shortcut’s reading, not Apple’s wording.

Use size classes
Two layouts cover every pose. Do not design a custom layout for each one.
Closed
Compact width
Open
Regular width
Shortcut takeawayBuild one responsive interface, not a separate design for each folding state.
Keep state and function
Keep the same functions and state on both displays. Add a level of hierarchy on the inner display if it suits the content.
Shortcut takeawayOpening the device should feel like gaining space, not entering another app.
Let the layout expand
Do not reinvent the app when it resizes. Let the existing layout expand.
- Size classes
- Layout margins
- Safe area insets
- Fixed widths
- Anything tied to one display
Toolbars and tab bars
The system moves toolbars and tab bars to the side on the outer display, and on the inner display in landscape. This keeps vertical space for content.
Shortcut takeawayApple says not to override this in general. Leave it unless you have a strong reason.
Partial fold
Keep important elements clear of the folding region. In a grid, prefer an even number of columns so content divides cleanly.
Small changes, not rearrangement
Avoid extreme layout changes as people fold the device. Favour small adjustments.

What Shortcut recommends

Craft guidance

Do

Design one layout that expands
Keep the task, selection and typed text across the fold
Use flexible sizing, margins and safe areas
Test closed, open and half-open

Don’t

Build a separate app for each state
Use fixed screen dimensions
Rearrange everything when it opens
Put controls or text on the fold

closed

Wider and shorter than other iPhones. Check that:

Navigation still works with bars on the side instead of the bottom.
Primary content stays visible without scrolling past chrome.
Forms remain usable.
Touch targets stay comfortable.
Text does not become overly dense.

open

More room. Let the layout grow into it. Consider:

A two-column layout.
A list beside its detail.
A contextual side panel.
Showing content that was behind a tap when closed.
Use beside another app in a split view.
A second level of information hierarchy.

Design review noteMore space does not automatically mean more content.

How spacing, navigation, layout and density read in each state

Spacing: Closed. Mobile reference.; Open. Tablet reference, with more room between regions.; Apple: Use layout margins and safe area insets, not fixed values.
Navigation: Closed. Bars on the side, not the bottom.; Open. Bars on the side in landscape; standard horizontal bars in portrait.; Apple: The system moves toolbars and tab bars to the side. Do not override it in general.
Layout: Closed. Usually a single pane.; Open. Can show two panes side by side.; Apple: A split view expands on the inner display and collapses to a single pane on the outer display.
Density: Closed. Touch-friendly.; Open. More information without smaller targets.; Apple: Show an additional level of hierarchy on the inner display if it suits the content.

All 12 foldable topics, one line each

Closed state: A narrow, phone-like screen. Design it as a complete experience, not a preview of the open one.
Open state: A wider screen with a different aspect ratio. The layout should grow into the width, not be scaled up in proportion and not be replaced with a different one.
Intermediate state: A device can be used half open. Check that nothing important sits where the screen bends.
Orientation changes: Open devices are rotated often. Both orientations need a layout that makes sense.
Continuity: Opening or closing mid-task should keep the task, the place and anything typed.
Responsive reflow: The change from closed to open is a large, sudden change in width. Treat it like any other width change: the content reflows, it does not reload.
Multitasking: An open device is often split between two apps, so your layout may get half the width you designed for.
Hinge and fold: Keep controls, text and dialogs off the fold line. Split content either side of it instead.
Dual-pane layouts: List and detail, or content and tools, side by side. Useful when the two halves relate; noise when they do not.
Touch targets: Both states are touch. More room is not a reason to shrink targets.
Content prioritisation: Decide what appears only when open, and make sure nothing essential is in that group.
State preservation: Selections, filters, form values and scroll position should survive the fold.

Testing across states

Closed
Open, portrait
Open, landscape
Half open, with the fold across the screen
Opened in the middle of a task
Closed in the middle of a task
Sharing the open screen with another app

In each one, check that the task, the selection and anything typed are still there.

Official sources

Sources

Apple
Apple HIG, Designing for iPhone Duo(opens in a new tab)
Authority
Design-system convention
Published
9 Sep 2026
Last verified
Verified 9 Oct 2026
Apple
Apple, iPhone Duo technical specifications(opens in a new tab)
Authority
Design-system convention
Last verified
Verified 9 Oct 2026
Material
Android Developers, Learn about foldables(opens in a new tab)
Authority
Design-system convention
Last verified
Verified 9 Oct 2026

What makes foldables different

Folding screens

Craft guidanceShortcut editorial, reviewed 9 Oct 2026

Applies to Foldable · Touch interfaces

A folding device is two viewports on one device. People switch between them in the middle of a task.

Schematic, not to scale. Choose Foldable above, then Closed or Open, to see it change. The dashed line is the fold.

Mobile: No separate value. Use the nearest one.
Tablet: No separate value. Use the nearest one.
Laptop: No separate value. Use the nearest one.
Desktop: No separate value. Use the nearest one.
Large desktop: No separate value. Use the nearest one.
Foldable, closed: A compact layout
Foldable, open: The same layout, expanded

Why?

The two screens differ in width and shape, and the switch is instant. The layout has to work in both and keep its place across the change.

Common mistakes (5)

Everything scaled up in proportion to fill the open screen.
A completely different layout when open, so people have to find everything again.
More content added when open only because there is room.
A control or a line of text placed across the fold.
Opening the device resets the screen to its start.

Official guidanceMaterial

Material
The differences in screen size and aspect ratio of folded and unfolded screens can be substantial, requiring alternative layouts.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable
Material
Position dialog boxes and pop-up menus so they do not overlay the fold. When the device is half opened, split content into two areas.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable
Material
The app must preserve and restore its state as the device folds or unfolds. The unfolded screen should show the same content, plus complementary content.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable

Closed and open

Closed: a compact width layout. One pane, with the bar at the side.

Schematic, not to scale. Opening keeps the selected item and the bar at the side, and adds the detail beside the list. The dashed line is the fold.

iPhone Duo, closed: Outer display. 5.4 inch, 1398 × 2034 pixels at 460 ppi.; Apple’s size class Compact width; Shortcut’s readingClosest to the Mobile reference. It is wider and shorter than other iPhone displays.
iPhone Duo, open: Inner folding display. 7.6 inch, 1878 × 2670 pixels at 430 ppi.; Apple’s size class Regular width; Shortcut’s readingClosest to the Tablet reference.

Key takeawayThose are physical pixels, not a CSS width. Do not set a breakpoint at 1398 px.

Why pixels are not the viewport

What Apple says

Apple’s guidance for iPhone Duo, restated. Lines marked Shortcut takeaway are Shortcut’s reading, not Apple’s wording.

Use size classes

Two layouts cover every pose. Do not design a custom layout for each one.

Closed: Compact width
Open: Regular width

Shortcut takeawayBuild one responsive interface, not a separate design for each folding state.

Keep state and function

Keep the same functions and state on both displays. Add a level of hierarchy on the inner display if it suits the content.

Shortcut takeawayOpening the device should feel like gaining space, not entering another app.

Let the layout expand

Do not reinvent the app when it resizes. Let the existing layout expand.

Size classes
Layout margins
Safe area insets

Fixed widths
Anything tied to one display

Toolbars and tab bars

The system moves toolbars and tab bars to the side on the outer display, and on the inner display in landscape. This keeps vertical space for content.

Shortcut takeawayApple says not to override this in general. Leave it unless you have a strong reason.

Partial fold

Keep important elements clear of the folding region. In a grid, prefer an even number of columns so content divides cleanly.

Small changes, not rearrangement

Avoid extreme layout changes as people fold the device. Favour small adjustments.

Foldables & Multi-state Devices cheat sheet

Filters

In 30 seconds

What makes foldables different

Folding screens

Closed and open

What Apple says

Use size classes

Keep state and function

Let the layout expand

Toolbars and tab bars

Partial fold

Small changes, not rearrangement

What Shortcut recommends

Do

Don’t

closed

open

Testing across states

Official sources

Foldables & Multi-state Devices cheat sheet

Filters

In 30 seconds

What makes foldables different

Folding screens

Closed and open

What Apple says

Use size classes

Keep state and function

Let the layout expand

Toolbars and tab bars

Partial fold

Small changes, not rearrangement

What Shortcut recommends

Do

Don’t

closed

open

Testing across states

Official sources

In 30 seconds

What makes foldables different

Folding screens

Closed and open

What Apple says

Use size classes

Keep state and function

Let the layout expand

Toolbars and tab bars

Partial fold

Small changes, not rearrangement

What Shortcut recommends

Do

Don’t

closed

open

Testing across states

Official sources

Related

In 30 seconds

What makes foldables different

Folding screens

Closed and open

What Apple says

Use size classes

Keep state and function

Let the layout expand

Toolbars and tab bars

Partial fold

Small changes, not rearrangement

What Shortcut recommends

Do

Don’t

closed

open

Testing across states

Official sources

Related