Mobile viewport sizes that actually matter in 2026

2026-09-09

There are hundreds of phone models and only a handful of viewport widths you need to care about. Here's the short list for 2026, and the edge cases that are worth a second look.

The core range: 360–430 CSS px

Almost every phone in active use reports a CSS viewport width between 360 and 430 pixels in portrait, regardless of how many hardware pixels it has. The clusters:

If your layout is clean at 360px and at 430px, the middle takes care of itself. Design at 390px, then stress-test the two ends.

Heights vary more than widths

Portrait heights run from ~667px (iPhone SE) to ~960px (tall Android). Don't assume vertical space. Anything that must be visible without scrolling — a cookie banner plus its buttons, a checkout CTA — has to fit at 667px.

Tablets: two widths

• ~768px — small tablets and the classic iPad breakpoint. Often still gets the phone layout.
• 820–834px — iPad Air / Pro portrait. Usually the point to switch to a two-column layout.

Landscape tablets (1024–1366px) overlap with laptops — test them as narrow desktop, not as big phone.

Foldables and edge cases

• Folded outer screen — as narrow as 344–360px. The real small-screen test now.
• Unfolded — ~690–840px, roughly a small tablet, but the app may resize live as the user unfolds.
• Split-screen / multi-window on Android and iPad — arbitrary widths down to ~320px. A fluid layout handles these for free; a fixed-breakpoint layout doesn't.

What about 320px?

Almost no current phone is 320px wide, but it's still a good floor to test — it's the narrowest split-screen pane and it flushes out any fixed-width element hiding in your CSS.

Practical takeaway

Build fluid. Set breakpoints by where your content breaks, not by device names. Then verify at 360, 390, 430, 768 and 834 — and once folded, at ~350.

▶ Open ViewOnPhone