iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Design an iPhone app around the space it receives, not around a particular iPhone model or a portrait-versus-landscape switch. Use SwiftUI or Auto Layout, make decisions from horizontal and vertical size classes, keep content inside system safe areas, and let text, localization, and window changes influence the layout.
Apple’s current Human Interface Guidelines (updated September 9, 2026) summarize the goal as: “Determine layout based on size classes, not device type or orientation.” A robust app keeps its core functions and information hierarchy recognizable while changing arrangement, visibility, and navigation when the available space changes.
Start with available space, not device names
An iPhone model is only an indirect clue about the space your interface will receive. The usable region can change when the device rotates, when system bars or features occupy part of the screen, when text becomes larger, or when an app is shown in another window context. A layout that looks correct on one physical phone can still clip or become unusable in another configuration.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Apple’s layout guidance explicitly accounts for different screen sizes, orientations, aspect ratios, Dynamic Island and other system features, external displays, resizable windows, text-size changes, and locale-related changes. Size classes are the abstraction that describes the available space. They can change with window configuration and multitasking rather than mapping permanently to one named device. See Apple’s Layout Human Interface Guidelines for the current design guidance.
#1 Best Overall
“Design a layout that adapts gracefully and consistently.” — Apple, Human Interface Guidelines
This principle leads to a practical rule: define what must remain available, what can move, and what can be condensed or revealed as the container gets wider or taller. Do not create a separate, hard-coded screen for every iPhone.
Understand horizontal and vertical size classes
A size class describes the amount of space available in one dimension:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →- Compact horizontal: the width is narrow, so controls may need to stack, scroll, or move into an overflow action.
- Regular horizontal: the width is broad enough for additional columns, persistent supporting content, or controls displayed side by side.
- Compact vertical: the height is short, so tall headers, large gaps, and permanently visible secondary panels need review.
- Regular vertical: the height permits more vertical content before scrolling or collapsing is required.
These classes combine, and every combination is possible in an app that supports changing windows or orientations. A layout should respond to the combination it receives rather than assuming that “iPhone” always means one particular pair.
| Layout signal | What it tells you | Useful design response |
|---|---|---|
| Compact width | Horizontal room is constrained | Use a single primary column, concise labels, wrapping text, and an overflow or drill-down path for secondary actions. |
| Regular width | More horizontal room is available | Consider a sidebar, a two-column detail view, or controls that were previously grouped. |
| Compact height | Vertical room is constrained | Reduce persistent vertical chrome, avoid fixed-height content, and allow scrolling. |
| Regular height | More vertical room is available | Show more supporting information without making essential actions harder to find. |
Do not infer these states solely from orientation. Two windows can have different widths while both are in portrait, and a rotated interface can still receive a compact width. Apple recommends considering all size-class combinations instead of treating orientation as a proxy.
Choose an adaptive layout foundation
Apple recommends SwiftUI or Auto Layout for interfaces that must respond to changing space. The right choice depends on whether the project is new, already uses UIKit, or needs to share components with an existing codebase.
| Approach | How it adapts | Best fit |
|---|---|---|
| SwiftUI | A declarative layout system recalculates the view hierarchy as available space and environment values change. Size classes can guide meaningful changes in composition. | New screens, SwiftUI projects, and features where the layout should be described in terms of content and containers. |
| UIKit with UIStackView | Stack views automatically arrange contained views and update their positions as the surrounding layout changes. | Common rows, forms, toolbars, and existing UIKit screens where the order of elements is stable. |
| UIKit with Auto Layout | Constraints express relationships for size and position instead of fixed coordinates. | Precise relationships, reusable components, and screens that need explicit alignment or priority rules. |
Apple’s UIKit view-layout documentation lists window resizing, screen and orientation variation, iPad multitasking, language changes, and Dynamic Type as reasons a view may need runtime layout changes. Its explanation of UIStackView and Auto Layout is useful even when the screen also contains custom views. The archived Auto Layout Guide provides background on constraints and size classes; use the current HIG and UIKit documentation for present-day recommendations.
Recommended Free Tools
Plan the information hierarchy before writing constraints
Adaptive design is not simply shrinking every element. First decide which information and actions are essential, then define how they can be represented at different widths.
- List primary tasks. Identify the action the screen exists to support and the content required to complete it.
- Separate supporting content. Mark descriptions, metadata, filters, and occasional actions that can move below the main content, into a secondary column, or behind an overflow control.
- Define relationships. Record which label belongs to which control, which items must remain together, and which content may wrap or scroll.
- Choose a smallest useful composition. On a narrow layout, preserve the primary task in one readable flow rather than squeezing multiple columns into the same width.
- Choose a wider composition. If additional width genuinely helps, expose a sidebar, persistent selection list, or detail pane while keeping the same underlying functions.
When space changes, preserve familiar functionality and the order of importance. A user should not lose a core action merely because a panel moved. What can change is whether that action is inline, in a toolbar, in a sidebar, or in an overflow menu.
Implement a size-aware SwiftUI composition
SwiftUI lets a view read the current horizontal and vertical size classes. Use those values for structural decisions, not for a long list of model-specific conditions.
struct DashboardView: View {
@Environment(.horizontalSizeClass) private var horizontalSizeClass
@Environment(.verticalSizeClass) private var verticalSizeClass
var body: some View {
Group {
if horizontalSizeClass == .regular {
HStack(alignment: .top, spacing: 24) {
PrimaryColumn()
SupportingColumn()
}
} else {
VStack(alignment: .leading, spacing: 16) {
PrimaryColumn()
SupportingColumn()
}
}
}
.padding()
}
}The example changes the relationship between columns while reusing the same content views. A production screen should also decide what happens when vertical space is compact: a supporting section might move below the primary content, become collapsible, or remain scrollable rather than forcing a fixed-height arrangement.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsPrefer flexible containers such as stacks, grids, scroll views, and geometry that follows the parent’s proposed size. Avoid using a device identifier to select a layout. If a particular component needs a minimum width, express that requirement locally and let the surrounding composition decide whether to stack or scroll.
Build UIKit screens with stacks and constraints
For UIKit, start with a hierarchy of views whose relationships can be expressed semantically. A vertical stack is appropriate for a form or a narrow content flow; a horizontal stack can place related controls side by side when there is enough room. Auto Layout constraints should describe edges, alignment, spacing, and priorities rather than hard-coded screen coordinates.
let contentStack = UIStackView(arrangedSubviews: [titleLabel, detailLabel, actionButton])
contentStack.axis = .vertical
contentStack.alignment = .fill
contentStack.spacing = 12
contentStack.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(contentStack)
NSLayoutConstraint.activate([
contentStack.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
contentStack.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
contentStack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 16)
])When a wider arrangement is useful, add a separate container or alter stack orientation based on the view’s available traits. Keep constraints unambiguous: every view needs a determinable position and size, and conflicting required constraints should be avoided. Let labels grow vertically instead of forcing a single line that can truncate translated or user-generated text.
Respect safe areas, margins, and system features
The screen edge is not automatically a safe place for content. System bars, camera and sensor areas, the Dynamic Island, home-indicator regions, and other system features can reduce the usable area. Anchor primary content to the safe area or the framework’s safe-area equivalent, and use readable layout margins for text and controls.
- Keep tappable controls clear of system-obscured regions.
- Do not assume a constant top inset or bottom inset across devices and window states.
- Let scroll views account for safe-area insets so the last item can be reached.
- Check custom backgrounds separately from foreground content; a background may extend to an edge while text and controls remain inside safe margins.
- Re-evaluate fixed headers and footers when the available height becomes compact.
Safe-area compliance is part of adapting to space, not a final visual polish step. A screen can have correct constraints and still hide controls if those constraints are tied to the physical edge instead of the usable region.
Design for Dynamic Type and changing text length
Text is a layout input. Dynamic Type can increase the size and height of labels, buttons, list rows, and navigation titles. Users can also enter content that is longer than your sample data. Build for wrapping and growth instead of treating the default text size as the only case.
- Use the platform’s text styles and scalable fonts rather than fixed point sizes for body copy and controls.
- Allow labels to wrap to multiple lines where the meaning remains clear.
- Give buttons enough vertical flexibility for a larger title or a translated phrase.
- Remove fixed heights from rows that contain variable-length text.
- Check the largest supported text sizes for clipped controls, overlapping icons, and unexpected scrolling.
A horizontal row that works with a short English label may fail when the same label wraps. If the action remains important, let the control grow, move it below the label, or replace a side-by-side arrangement with a vertical one at the point where content pressure appears.
Account for localization and writing direction
Localization changes more than a few words. Translated strings can be longer or shorter, word boundaries can change wrapping, and writing direction can reverse the visual order of directional elements. Avoid embedding assumptions about English word length or left-to-right order in constraints.
- Use leading and trailing relationships rather than left and right whenever the framework supports them.
- Keep strings externalized so translators can work with complete phrases.
- Allow enough width for expansion and enough height for additional lines.
- Check dates, numbers, and plural forms in the locales your app supports.
- Inspect icons that imply direction; a forward arrow may need to mirror in a right-to-left layout.
Localization testing belongs in the same validation pass as device testing. A layout that survives a second phone but not a translated string is not adaptive.
Use wider layouts to reveal hierarchy, not to add unrelated features
Additional width can improve navigation when it exposes information that was previously hidden behind a tap. For example, a list and its selected detail can share the screen in a regular-width arrangement, while a compact-width arrangement can navigate from the list to a separate detail screen.
The functions should remain recognizable in both forms. Keep selection state, back navigation, and primary actions consistent. Do not make a feature available only in the wider layout unless the narrow layout has a clear equivalent. A sidebar is valuable when it reduces repeated navigation; it is harmful when it creates a second, confusing hierarchy.
Compact-width pattern
- Present one primary level at a time.
- Use navigation or a sheet for supporting detail.
- Group secondary actions under an overflow control when showing every action would crowd the task.
Regular-width pattern
- Keep a selection list or navigation rail visible when it helps users move among items.
- Place related detail beside the selection rather than below a long page.
- Expose frequently used options that no longer need to compete for a narrow toolbar.
These are composition choices, not device categories. The same app may switch between them whenever the available width crosses the point at which the hierarchy is clearer in one form.
Free tools Windows power users keep installed
One-click scans. No signup required.
Support orientation, resizing, and other window contexts deliberately
Apple’s guidance aims for portrait and landscape support on iOS, while recognizing that some experiences may reasonably support only one orientation. Decide based on the task: a camera or game interface may have a strong orientation requirement, while a reading, messaging, or data-entry screen usually benefits from adapting to both.
Also consider contexts beyond a full-screen phone:
- Rotated devices: width and height exchange roles, and the size-class combination can change.
- Resizable or multitasking windows: the same scene may receive several widths during its lifetime.
- External displays: available dimensions and aspect ratios can differ from the built-in screen.
- Mirroring to Mac: an iPhone app shown in another environment may receive a different effective window size.
- System UI changes: bars, insets, and features can alter the usable region while the app is running.
Listen to the framework’s layout and trait updates rather than caching an initial screen measurement. Recalculate views when the environment changes, and make sure state survives a reflow so a user does not lose an entered value or selection.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use device dimensions as reference examples, not breakpoints
Apple’s Layout page, updated September 9, 2026, lists these iPhone portrait dimensions in points:
| Model listed by Apple | Portrait size in points | How to use the value |
|---|---|---|
| iPhone 17 | 402 × 874 | Useful as one simulated preview size; not a universal breakpoint. |
| iPhone 17 Pro | 402 × 874 | Useful as one simulated preview size; not a universal breakpoint. |
| iPhone 17 Pro Max | 440 × 956 | Useful as one larger simulated preview size; not a universal breakpoint. |
These are specifications, not measured performance results. They do not tell you the safe-area insets, text settings, window state, or content pressure for a particular screen. Use them to choose preview examples, then let size classes and the actual container determine the composition.
Rank #4
Create a practical preview and test matrix
Previewing only the phone used by the developer is likely to miss the failures that matter. Start with the smallest and largest supported layouts, then add the conditions that affect your audience and content.
- Smallest supported layout: look for clipped labels, inaccessible actions, forced horizontal scrolling, and controls that collide.
- Largest supported layout: check whether content becomes awkwardly stretched or leaves an empty, unexplained region.
- Portrait and landscape: rotate where the app supports both, including while a form contains entered data.
- Size-class combinations: exercise compact and regular width and height states that the app can receive.
- Dynamic Type: check the default size and larger accessibility sizes, especially on rows and toolbars.
- Localization: test the longest realistic strings and any right-to-left locale your app supports.
- Window contexts: resize or use the supported multitasking, external-display, or mirrored context.
- System features: inspect content near safe-area edges and around current system bars or cutouts.
Simulated devices can reveal clipping, wrapping, and hierarchy problems efficiently. Some display characteristics and physical reachability are best checked on actual hardware, but a physical test phone is not a substitute for varied layout states.
Diagnose common adaptive-layout failures
Failure: branching on the model name
Symptom: a screen works on one phone but fails after rotation or in a resized window. Fix: replace model and orientation checks with size-class or container-size decisions, then test the resulting combinations.
Failure: fixed frames and coordinates
Symptom: labels clip, buttons overlap, or blank space appears when content changes. Fix: use stacks and constraints, allow intrinsic text height, and remove fixed dimensions that are not genuine content requirements.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Failure: content under system UI
Symptom: a top control or bottom action is partially hidden. Fix: anchor interactive content to safe areas and verify scrolling in every supported window state.
Failure: larger text breaks the hierarchy
Symptom: a title pushes an action off-screen or a row becomes unreadable. Fix: permit wrapping, increase row height, stack controls, or move secondary actions into a separate flow.
Failure: localization changes the geometry
Symptom: translated labels truncate or directional icons feel reversed. Fix: use leading/trailing constraints, test expansion, and mirror directional elements where appropriate.
Failure: the wide layout exposes too much
Symptom: a sidebar and detail pane make the main task harder to scan. Fix: use extra width to clarify the existing hierarchy, not to display every possible option at once.
A decision checklist before shipping
- Does the screen decide from available width and height rather than a named device?
- Is the primary task still available in the narrowest supported composition?
- Can labels and controls grow for Dynamic Type and translated text?
- Are content and interactions inside safe areas and readable margins?
- Do stack views or constraints describe relationships instead of fixed coordinates?
- Does a wider layout improve navigation without changing the app’s recognizable function?
- Have you checked the smallest and largest layouts, supported orientations, relevant text sizes, and localizations?
- Have you exercised any resizable, multitasking, external-display, or mirrored context your app supports?
- Does state survive rotation and layout reflow?
If any answer is no, fix the layout model before adding device-specific exceptions. Exceptions tend to multiply as new screens, translations, text settings, and window contexts are introduced.
When a single orientation is reasonable
Adaptive design does not require every app to support every orientation. If the core interaction depends on a stable physical direction, document that decision and make the supported orientation polished. For most content and productivity screens, however, supporting portrait and landscape provides a better experience because the same information can be reorganized instead of artificially constrained.
Even an orientation-limited screen still needs safe-area handling, Dynamic Type, localization, and flexible constraints. Restricting rotation removes one variable; it does not remove the other causes of layout change.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
