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 →Design for the space your interface actually receives, not for a particular iPhone model or a portrait-versus-landscape guess. In Apple’s Human Interface Guidelines, updated September 9, 2026, the core rule is: determine layout based on size classes, not device type or orientation. Build the interface with SwiftUI or Auto Layout, respect safe areas, let content grow with Dynamic Type and translation, and validate the smallest and largest supported layouts before polishing intermediate cases.
An adaptive app keeps the same essential tasks and information hierarchy while changing arrangement, visibility, and navigation when width or height changes. The result should feel like one coherent product in portrait, landscape, split windows, resized windows, and accessibility settings—not a collection of device-specific screens.
As an Amazon Associate I earn from qualifying purchases.
Start with available space, not an iPhone model
Every screen has a usable rectangle that can change at runtime. The operating system derives horizontal and vertical size classes from that available space. A class can be compact, meaning relatively narrow or short, or regular, meaning relatively wide or tall. The combination is more useful than a model name: compact width with regular height is common on a portrait phone, while compact width with compact height can occur in a short landscape window.
Size classes reflect the current window configuration, not just the physical display. They can change when a window is resized, when an iPad app enters multitasking, or when an iPhone app is mirrored to a Mac. Two windows on the same hardware can therefore require different layouts. Apple documents these factors in its Layout guidance.
#1 Best Overall
What the four combinations mean
| Horizontal class | Vertical class | Design implication |
|---|---|---|
| Compact | Regular | Prioritize one column, concise controls, and a clear primary action. |
| Regular | Regular | There is room for a sidebar, two-column content, or persistent secondary actions. |
| Compact | Compact | Expect reduced height; avoid controls that depend on a fixed vertical stack. |
| Regular | Compact | Use the width, but keep important content reachable in a short window. |
These labels are not pixel breakpoints. The system may assign the same class to different point sizes, and a class can change without a device changing. Use it to choose a layout strategy, then let intrinsic content size and constraints determine exact positions.
Why device and orientation checks fail
A rule such as “if this is an iPhone 17, show layout A” becomes stale as soon as a new size, window mode, or system feature appears. “If landscape, use layout B” is also unreliable: a narrow landscape window and a wide landscape window can have different classes, and portrait does not always imply the same available height after system bars and text scaling are applied. Branch on the space and the content requirements instead.
Choose an adaptive layout foundation
Apple’s current guidance recommends SwiftUI or Auto Layout. Both describe relationships that can respond to changing space, rather than requiring a separate hard-coded screen for every phone.
Recommended Free Tools
| Approach | How it adapts | Best fit | Watch for |
|---|---|---|---|
| SwiftUI | Declarative stacks, grids, environment values, and size-aware containers recompute the view hierarchy when the available space changes. | New interfaces or screens that can use modern SwiftUI navigation and layout. | Do not replace flexible layout with fixed frames or device-name conditionals. |
| UIKit with UIStackView | A stack automatically arranges arranged subviews and updates their positions as the container changes. | Existing UIKit screens with straightforward rows, columns, or form sections. | Set sensible content-hugging and compression-resistance priorities so important text is not squeezed away. |
| UIKit Auto Layout | Constraints specify size and position relationships; the engine resolves them for the current window. | Complex relationships, reusable components, and mixed legacy/new code. | Missing, conflicting, or over-constrained rules can produce warnings or clipping. |
UIKit’s view-layout documentation describes runtime changes caused by window resizing, orientation, iPad multitasking, language changes, and Dynamic Type. Auto Layout’s constraint-based model is also explained in Apple’s Auto Layout Guide.
A SwiftUI size-class pattern
Read the environment’s horizontal size class and alter hierarchy only when the available width justifies it. The following pattern keeps the same message functionality while exposing a sidebar in a regular-width environment:
struct MailView: View {
@Environment(.horizontalSizeClass) private var widthClass
var body: some View {
Group {
if widthClass == .regular {
NavigationSplitView {
FolderList()
} detail: {
MessageList()
}
} else {
NavigationStack {
MessageList()
}
}
}
}
}The conditional is about width, not a named model. Keep the same folders, messages, and actions available in both branches; only their presentation changes. For intermediate content, prefer flexible stacks, grids, and intrinsic text sizing over a series of additional thresholds.
A UIKit stack-and-constraint pattern
For a UIKit screen, put related controls in a stack, then constrain that stack to the safe area. The stack handles ordinary arrangement; Auto Layout handles the relationship to its container.
let stack = UIStackView(arrangedSubviews: [titleLabel, bodyLabel, actionButton])
stack.axis = .vertical
stack.spacing = 12
stack.alignment = .fill
stack.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stack)
NSLayoutConstraint.activate([
stack.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),
stack.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16),
stack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 16)
])Let labels wrap and let the button determine its height. Add explicit width constraints only when a component genuinely needs one, such as an icon with a known square aspect ratio.
Design the information hierarchy before changing the arrangement
Adaptive work is not merely making every view smaller. First decide what must remain visible, what can move, and what can be deferred when space is tight.
- List the essential task. Write the action a user must complete on this screen and the minimum information needed to make a safe decision.
- Rank secondary content. Mark supporting metadata, optional filters, explanations, and destructive actions as candidates for a secondary column, disclosure, or overflow menu.
- Choose the narrow layout. A compact width usually benefits from one primary column, short labels, and navigation that pushes to a detail screen.
- Choose the wider layout. A regular width can keep a list and detail view visible together, expose filters, or move frequent actions out of an overflow menu.
- Preserve behavior. Do not remove a capability simply because it is not visible in the compact arrangement. Provide a discoverable path to the same function.
- Test transitions. Resize or rotate while a user is editing, scrolling, or viewing a selected item. Preserve selection, entered text, and scroll position where the task allows.
Example: a document browser
In a narrow layout, show folders, a document list, and a detail editor as successive navigation levels. In a regular-width layout, keep the folder list in a sidebar, the document list in a middle column, and the editor in the detail area. The data model and commands remain the same; only the number of simultaneously visible levels changes.
Example: a form
Do not turn a short phone form into a three-column desktop-style grid merely because extra width exists. Keep labels close to their fields, group related questions, and use additional width for comfortable margins or a supporting explanation. A grid is appropriate only when comparison or scanning benefits from aligned columns.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Respect safe areas, margins, and system features
The safe area is the region not obscured by system bars, the camera area, the Dynamic Island, home indicators, or other system-managed features. Anchor content to safe-area guides or SwiftUI safe-area-aware containers instead of guessing a top inset. A value that looks correct on one phone can collide with a status region on another.
- Use the view’s safe-area layout guide in UIKit and the normal safe-area behavior of SwiftUI containers.
- Keep tappable controls away from the bottom home-indicator region and provide enough spacing for comfortable gestures.
- Re-evaluate available height when a keyboard, call bar, notification banner, or other system surface appears.
- Use consistent content margins so text and controls do not touch the screen edge when the usable width expands.
- Do not place essential information inside a decorative region that may be cropped or covered by a system feature.
Safe-area handling is separate from size-class selection. A window can remain regular width while its usable height shrinks, so constraints and intrinsic sizing must respond to both.
Let text, localization, and writing direction drive the layout
Text is often the first variable that exposes a brittle interface. Dynamic Type can enlarge labels and body text beyond the values used during design. Translated strings can be substantially longer or shorter than English, and some languages change word order or require a right-to-left writing direction.
Dynamic Type requirements
- Use text styles rather than fixed point sizes so the system can scale typography.
- Allow labels to wrap to multiple lines; do not truncate an instruction that is required to complete a task.
- Give buttons enough height for larger text and avoid placing several variable-length labels in one fixed-height row.
- Set compression resistance so critical text remains readable before a decorative icon or spacer.
- Check the largest accessibility text sizes supported by the screen, not only the default setting.
Localization and right-to-left layout
Build constraints around leading and trailing edges rather than left and right. Keep strings in localization resources, and assume a translated button title may need two or three times the width of the source language. Use plural-aware strings for counts and avoid embedding text inside images. Verify that icons conveying direction are mirrored when appropriate, while universal symbols such as media controls retain their established meaning.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Content that arrives at runtime
User names, document titles, error messages, and server-provided values can be much longer than sample data. Test an empty state, a very long value, a missing value, and a large collection. A layout that works only with designer-provided text is not adaptive.
Support orientation and changing windows deliberately
Apple’s guidance aims for portrait and landscape support on iOS, while recognizing that some experiences may reasonably support only one orientation. Make that decision from the task: a camera or game may have a strong orientation requirement, while a reading, messaging, or utility app generally benefits from both.
If both orientations are supported
- Define the primary content order for portrait and landscape before implementing constraints.
- Use size classes to decide when a second column or persistent toolbar is useful.
- Keep controls reachable after rotation; do not leave a primary action at an extreme corner solely because it fit in the previous orientation.
- Preserve state during rotation, including the selected item, draft text, and scroll position.
- Check short-height landscape cases where the keyboard or a system bar consumes a large share of the window.
If only one orientation is justified
Declare the supported orientation clearly and make the restriction part of the product decision, not a workaround for unresolved constraints. Ensure that the permitted orientation still handles Dynamic Type, localization, safe areas, and resized contexts that the platform allows.
Rank #4
External and resizable contexts
Do not assume the app always occupies the physical iPhone display. Resizable windows and external-display or mirroring scenarios can expose widths and heights that were not represented by a device mockup. Size-aware containers and constraints should continue to produce a usable hierarchy in those contexts; if a capability is unsupported, communicate that limitation rather than showing clipped content.
Use dimensions as reference points, not hard-coded breakpoints
Apple’s Layout page lists current device specifications, including these portrait point dimensions:
| Device listed by Apple | Portrait size in points | How to use the figure |
|---|---|---|
| iPhone 17 | 402 × 874 | Reference for previewing a representative current phone; not a universal breakpoint. |
| iPhone 17 Pro | 402 × 874 | Same listed point dimensions; do not infer identical hardware behavior from this table alone. |
| iPhone 17 Pro Max | 440 × 956 | Reference for a larger phone layout; still account for safe areas, text size, and window state. |
These are specifications on Apple’s page updated September 9, 2026, not measured test results. Point dimensions describe a nominal display coordinate space; they do not tell you the final safe area, keyboard state, Dynamic Type setting, or localization. Use them to choose simulator previews, never as logic such as “width greater than 402 means Pro Max.”
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Build a validation matrix that finds failures early
Preview the smallest and largest supported layouts first. If the extremes work, intermediate widths are usually easier to refine; if either extreme fails, adding more devices only hides the underlying constraint problem.
| Test dimension | Minimum coverage | Look for |
|---|---|---|
| Width and height | Smallest and largest supported windows, plus at least one middle size | Clipping, excessive empty space, unexpected wrapping, and broken hierarchy. |
| Orientation | Portrait and landscape when supported | Reachability, preserved state, short-height collisions, and usable navigation. |
| Text size | Default plus large accessibility settings | Truncation, overlapping controls, unreadable errors, and buttons that cannot be tapped. |
| Localization | Longest likely translations and a right-to-left locale when relevant | Expanded labels, mirrored layout, plural forms, and direction-sensitive icons. |
| Window context | Resized or multitasking windows and supported external or mirrored contexts | Class changes, safe-area differences, and assumptions that the app owns the full screen. |
| Content | Empty, typical, long, and error states | Rows that grow correctly, stable loading states, and recoverable errors. |
Simulator versus physical hardware
Simulated devices can reveal clipping, wrapping, and size-class mistakes efficiently. Use actual hardware when a display characteristic, gesture region, camera-area treatment, keyboard behavior, or performance detail matters. Neither simulator screenshots nor a single physical phone proves that every supported window and text setting works.
Free tools Windows power users keep installed
One-click scans. No signup required.
Preview during development
Create previews for representative compact and regular classes, then vary the content and text size. For SwiftUI, keep preview data deterministic so a long title or empty collection is always visible during review. For UIKit, exercise the same states through a test harness or sample data. Capture screenshots at the smallest and largest layouts and compare hierarchy, not just pixel alignment.
Common failure modes and precise fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| A title is cut off on a larger text setting. | Fixed-height label or a row that resists vertical growth. | Allow multiline text, remove the fixed height, and give the label appropriate compression resistance. |
| A button disappears when the translation is longer. | Several controls share a fixed-width row. | Stack controls, allow wrapping, or move secondary actions into an overflow or detail view. |
| Content sits under the Dynamic Island or home indicator. | Manual inset based on one device. | Constrain to safe-area guides and test system-bar variations. |
| Landscape shows a large blank region. | The portrait column was merely stretched. | Use regular width for a second column, wider margins, or a supporting pane that improves scanning. |
| Two views overlap after rotation. | Conflicting or incomplete constraints, or frames set once in initialization. | Remove frame-based positioning, inspect Auto Layout warnings, and define unambiguous relationships. |
| A feature is missing in compact width. | The implementation hides it without an alternate path. | Keep the command in a detail screen, toolbar, sheet, or overflow menu and preserve discoverability. |
| Right-to-left text looks reversed or misaligned. | Leading/trailing were replaced with left/right or directional icons were not evaluated. | Use semantic edges, test an RTL locale, and mirror only symbols whose meaning is directional. |
| Resizing loses a draft or selection. | View recreation is not connected to persistent state. | Store task state outside transient view geometry and restore selection and entered values after layout changes. |
A practical implementation sequence
- Inventory supported contexts. Record orientations, minimum and maximum windows, multitasking or mirroring scenarios, Dynamic Type range, and localizations.
- Map the content hierarchy. Identify primary actions, secondary actions, required explanations, and content that can move behind navigation.
- Sketch compact and regular layouts. Draw the smallest usable arrangement and the widest arrangement that improves scanning. Do not begin with device screenshots.
- Implement relationships. Use SwiftUI layout containers or UIKit stacks and Auto Layout. Anchor to safe areas, use intrinsic sizes, and avoid fixed heights for text.
- Add size-class decisions. Introduce a second column, persistent controls, or different navigation only when the available class and hierarchy justify it.
- Exercise text pressure. Replace sample strings with long translations, large text, long names, empty states, and errors.
- Rotate and resize during real tasks. Verify that drafts, selection, navigation depth, and scroll position remain sensible.
- Review accessibility and discoverability. Confirm labels, hit targets, focus order, VoiceOver navigation, and the location of actions that moved between layouts.
- Remove accidental device logic. Search for model-name checks, orientation-only branches, magic widths, and manual insets that duplicate system behavior.
Adaptive-layout checklist
- Layout decisions use available width and height, especially horizontal and vertical size classes, rather than device names.
- The same core tasks and information remain available in compact and regular arrangements.
- SwiftUI containers, UIStackView, or Auto Layout express relationships instead of fixed screen coordinates.
- All content is inside the appropriate safe area and remains usable around system features.
- Dynamic Type can enlarge text without clipping or making primary actions unreachable.
- Long translations, plural forms, right-to-left text, and runtime content have been exercised.
- Portrait and landscape behavior is intentional, including short-height landscape windows.
- The smallest and largest supported layouts have been previewed before intermediate refinements.
- Resizing, multitasking, mirroring, and other supported window contexts do not destroy state.
- Dimensions from current device specifications are used for previews, not encoded as permanent breakpoints.
An iPhone app adapts well when its hierarchy survives a change in space: one column can become two, an overflow action can become a visible control, and a compact navigation path can become a persistent sidebar without changing what the product lets people accomplish. Build those relationships around size classes, safe areas, intrinsic content, and real text, then validate the extremes and the transitions.
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.
