Layout Testing Across Screens: Notches, Safe Areas, Foldables and Font Scale

You see the app through one screen — yours. Users hold thousands of different ones: narrow 21:9, camera cutouts, gesture bars instead of buttons, foldables, tablets, and someone at 200% font scale because otherwise they can’t read it. The layout that’s perfect on your Pixel will slip somewhere on theirs: the “Pay” button under the gesture bar, a title clipped mid-word, key content hidden behind the notch.

This is its own class of bugs — not logic, geometry. Functional tests miss it: they’ll click an element even if half of it is off-screen. Here’s what to check.

1. Aspect ratios

Screens have stretched: 16:9 is gone, 19.5:9, 20:9, 21:9 arrived. On narrow screens the bottom content drifts off; on wide ones the background stretches or black bars appear.

Content not clipped or stretched. Background images are cover/contain on purpose. In games, the camera doesn’t cut the UI at the edges.
Bottom zone. On tall screens, bottom buttons don’t stick to the very edge or slide under system zones.
Extremes. Test not the “average” device but the boundaries: the narrowest and widest in your matrix, the smallest and largest by physical size.

2. Cutouts and safe area

Notch, punch-hole, “island” — the cutout bites off part of the top. At the bottom, a gesture bar or navigation bar. Everything important must live inside the safe area.

Nothing tappable or readable under the cutout or the gesture bar.
The status bar and its content don’t overlap the header.
Full-screen mode (games, video, camera) handles the cutout — content clear of it, but no unintended side bars.
Inset APIs used correctly (safeAreaInsets on iOS, WindowInsets on Android), not hardcoded “for this one phone” padding.
Gesture nav vs buttons — with gestures, the bottom swipe doesn’t fight your bottom controls (carousels, sliders, swipe-to-dismiss).

3. Foldables

Foldables aren’t exotic anymore. The core pain: unfolding changes the configuration on the fly, like rotation but sharper — both size and ratio change.

Fold/unfold doesn’t lose state: typed text, list position, open screen survive.
No crash on config change (the classic Android Activity-recreation bug).
Content adapts rather than just stretches: on the unfolded tablet screen — a two-pane layout or sensible margins, not one column full-width.
The hinge doesn’t cut important content in half.
Continuity: fold on the cover screen, unfold to the inner one, the app continues where it was.

4. Tablets and large screens

A tablet is not a stretched phone. One column on 12 inches looks broken.

Sensible margins and a max content width, not a line of text spanning the whole screen (unreadable).
Where it fits — master-detail (list left, content right).
Modals and dialogs don’t fill the entire huge screen.
Images and icons aren’t blurry from missing high-density assets.

5. Font scale and accessibility

A user can crank the font to 200% (iOS Dynamic Type, Android Font Scale). It’s one of the most common causes of broken layout — and one of the least tested scenarios.

At 200% text is not clipped and doesn’t ellipsize on an important word.
Buttons and rows grow to fit the text instead of overlapping.
Text uses scalable units (sp on Android, Dynamic Type / UIFontMetrics on iOS), not dp/fixed points.
Two-line titles don’t break the header; badges and counters don’t overflow.
Check the reverse too — the minimum scale — so the layout doesn’t fall apart with gaps.

6. Keyboard and input

The keyboard appearing is also a change in available height.

The active field is not covered by the keyboard: the screen lifts/scrolls to it (adjustResize on Android, keyboard avoidance on iOS).
The submit button stays reachable with the keyboard up, or moves under it predictably.
Autofill doesn’t leave the button disabled (autofill often doesn’t trigger validation — a common bug).
The right keyboard type per field (phone number — numeric), correct Done/Next, moving between fields.

7. Split-screen, multi-window, PiP

A user can squeeze your app into half the screen or shrink a video into picture-in-picture.

In split-screen no crash and no broken layout; the minimum width is handled.
Resizing the window on the fly doesn’t lose state.
Picture-in-Picture (video) minimizes and restores correctly.

8. Orientation

Even if the app is “portrait only” — that must be explicitly locked and verified.

The declared orientation is actually locked on every screen (including webviews, camera, video).
If rotation is allowed — state isn’t lost, layout reflows, nothing is clipped.
Landscape in a game/video clears the cutout and doesn’t hide UI under the gesture bar.

Tools

Android Studio Resizable Emulator — switch phone / unfolded / tablet / desktop and change the ratio on the fly.
Foldable emulator and Layout Inspector — inspect the hierarchy and paddings.
Font scale / Dynamic Type — crank it quickly in emulator/simulator settings.
xcrun simctl and various iPhone/iPad simulators with and without a cutout.
Device farm (Firebase Test Lab, BrowserStack, Sauce Labs) — real cutouts, foldables, tablets you don’t have on hand.
Accessibility Inspector / Scanner — catches contrast and tap sizes at the same time.

Checklist

Narrowest and widest screen in the matrix — content not clipped/stretched.
Nothing important under the cutout or gesture bar (safe area).
Padding via inset APIs, not hardcoded for one phone.
Foldable: fold/unfold keeps state and doesn’t crash.
The hinge doesn’t cut content; continuity between screens works.
Tablet — adaptive layout, not a stretched phone.
Font at 200% — text not clipped, buttons not collapsed.
Text in sp / Dynamic Type, not fixed units.
Keyboard doesn’t cover the active field; submit stays reachable.
Split-screen and window resize — no crash or lost state.
Orientation explicitly locked or rotation doesn’t lose state.
Verified on a device farm, not just your own phone.

Layout isn’t a “designer detail.” A button under the chin on 21:9 is a lost payment; text clipped at 200% is a user who can’t read what’s happening. Geometry deserves to be tested as systematically as logic.