Mobile Screen Sizes for Web Design: 6.1–6.8 Inch Phones and CSS Breakpoints

Most phones your users hold sit between about 6.1 and 6.8 inches. Design for that band first. Then stress-test a compact outlier and a 6.8–6.9 inch Pro Max / Ultra.

Physical inches and CSS viewport widths are not the same number. A 6.7-inch phone might layout at ~360 CSS px or ~430 CSS px depending on resolution and scaling. If you only copy the marketing diagonal into a media query, the layout will lie to you.

Here is the 2026 size map, the CSS widths that actually show up in DevTools, and a breakpoint set that stays useful without chasing every SKU.

Quick answer for designers

What you need	Use this
Default physical band	6.1–6.8 inches
Default CSS widths to test	~360, ~390–393, ~430 CSS px
Large-phone check	~6.9 inch / ~430–480 CSS px
Fold open	treat as tablet width (~700px+)

Live checks: viewport checker, breakpoint checker, device compare.

In our device catalog, phone panels cluster heavily on 2400 × 1080 and 1440-wide grids. That is a catalog mix, not global market share, but it is a useful QA hint. Full breakdown: screen resolutions in our device database.

What “mobile screen size” means (inches vs pixels)

Screen size is the viewable diagonal in inches. Same definition as monitors: corner to corner on the lit panel. See how to measure screen size if you want the tape version.

Resolution is the physical pixel grid (for example 2778 × 1284). Check yours with the screen resolution checker.

CSS viewport width is what window.innerWidth and media queries see. On phones it is usually physical width ÷ DPR, minus browser chrome quirks.

Example: many recent iPhones layout near 393 CSS px wide at DPR 3. The marketing panel is still ~6.1–6.3 inches. Both facts are true. They answer different questions.

Deep dive: viewport vs screen width vs DPR and DPR and CSS pixels.

Mobile screen size buckets in 2026

Compact: under ~6.2 inches

Useful for one-handed use. No longer the center of the market.

• iPhone 17e: 6.1" (2532 × 1170, 460 PPI)
• iPhone 16: 6.1" (2556 × 1179)
• Galaxy S25: 6.2" (2340 × 1080, 416 PPI)
• Galaxy S26: 6.3" sits on the compact-to-mainstream edge (2340 × 1080)

True sub-6-inch phones are rare. If you still support older SE-class layouts, treat them as an accessibility edge case, not the default.

Mainstream: ~6.3–6.7 inches

This is where most traffic lives.

Apple

• iPhone 17 / iPhone 17 Pro: 6.3" (2778 × 1284, 460 PPI)
• iPhone Air: 6.6"
• Chart: iPhone 17 screen sizes · Apple brand index

Samsung and Google

• Galaxy S26+: 6.7" (3120 × 1440)
• Pixel 11 / Pixel 11 Pro: 6.3"
• Pixel 10: 6.3" (2424 × 1080)
• Chart: Galaxy S25 & S26 screen sizes · Samsung · Google

Android flagships outside the usual US shortlist

• OPPO Find X9: 6.59" · Find X9 Pro: 6.78"
• vivo X300: 6.49" · X300 Pro: 6.78"
• OnePlus 15: 6.78"
• Honor Magic8: 6.55" · Magic8 Pro: 6.71"
• Motorola Edge 60 Pro: 6.7"
• Xiaomi 15: 6.36"

Brand indexes: Oppo, Vivo, OnePlus, Honor, Motorola, Huawei, Xiaomi.

Large: ~6.8–6.9 inches and foldables

These are common enough that your layout should not treat “plus size” as exotic.

• iPhone 17 Pro Max: 6.9" (2868 × 1320, 460 PPI)
• Galaxy S26 Ultra: 6.9" (3120 × 1440)
• Galaxy S25 Ultra: 6.9"
• Pixel 11 Pro XL: 6.8"
• Huawei Pura 80 Pro: 6.8"
• OPPO Find X9 Ultra: 6.82"
• Foldables like Pixel 11 Pro Fold and OnePlus Open jump from phone to tablet widths on one device

Thumb reach gets worse as diagonals climb. Sticky primary actions and bottom navigation matter more here.

Reference devices: inches next to resolution and PPI

Same diagonal does not mean same sharpness. Compare a compact iPhone to a compact Galaxy:

For a wider Android CSS width chart (estimated logical sizes), use Android CSS viewport sizes.

CSS viewport widths you will actually see

Phone marketing uses inches. Responsive CSS uses logical pixels.

Rough DevTools bands:

Band	CSS width (portrait)	Typical devices
Small	~320–374px	Compact Android at ~3×, older SE-class
Standard	~375–413px	Many iPhones (~390–393), mid Androids
Large phone	~414–480px	Pro Max / Ultra / dense 1440p Androids
Fold open / small tablet	~481–768px+	Inner fold displays, small tablets

A 6.7-inch phone is not automatically a “large” CSS viewport. Density and OS scaling decide that.

Verify live values with:

• What is my viewport
• Device pixel ratio checker
• 390px breakpoint page · 393px · 360px

Breakpoints that still make sense for mobile web design

Start mobile-first. Use a few solid breakpoints, then fluid type and spacing between them. Do not invent a media query per phone model.

/* Practical mobile-first bands */
/* default: phones (~360–430 CSS px) */
@media (min-width: 480px) {
  /* large phones / phablets */
}
@media (min-width: 768px) {
  /* tablets / fold open */
}
@media (min-width: 1024px) {
  /* desktop */
}

Prefer relative units and container queries for cards and modules. Viewport media queries alone get brittle when the same component sits in a narrow column on a wide phone.

.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

For a full audit workflow (pick targets, DevTools, real devices, fix, retest), see build a responsive site that passes screen size tests. Generate starter queries with the media query generator.

Design notes that matter more than the inch number

Thumb zones. On 6.5"+ phones, top-corner primary buttons punish one-handed use. Keep critical actions in the lower half when you can.

Content density. Larger phones invite longer reading sessions. They also punish sparse layouts that waste vertical space. Compact phones punish dense tables and multi-column cards.

Touch targets. Keep tappable controls at least ~44×44 CSS px. That rule does not change because a Pro Max has more glass.

Images. Pair srcset / sizes with DPR. A 6.1-inch flagship can still request 3× assets. Snippets: viewport vs screen width.

How to test mobile screen sizes without buying every phone

1. Pick one compact (~6.1"), one mainstream (~6.3–6.7"), and one large (~6.9") reference from the lists above.
2. Compare them in Compare.
3. Check CSS viewport and DPR on a real device with the site tools.
4. Use cloud device labs for brand coverage (Oppo, Vivo, Honor) your office does not own.
5. Watch one-handed reach on large phones, not just whether the layout “fits.”

Series views: iPhone, Galaxy S, Pixel, Find X, vivo X Series, OnePlus, Honor Magic, Motorola Edge.

FAQ: mobile screen sizes and responsive design

What is the most common phone screen size in 2026?

Most current phones cluster around 6.1–6.8 inches, with mainstream flagships often near 6.3–6.7 inches. Design for that band first, then verify compact and Pro Max / Ultra sizes.

What mobile screen size should I use for web design?

Test CSS widths around 360, 390–393, and 430 pixels, not a single “mobile” mock. Those cover compact Android, common iPhone logical widths, and many large-phone layouts.

Is screen size the same as viewport width?

No. Screen size is the physical diagonal in inches. Viewport width is the CSS layout width in pixels. A large phone can still report a mid-size CSS width depending on scaling.

Which phones should I test for responsive design?

At minimum: one ~6.1" compact, one ~6.3–6.7" mainstream, and one ~6.9" large. Add a foldable if your audience uses them. Specs are linked throughout this page.

Do Android brands differ much from iPhone sizes?

Diagonals overlap heavily. Fragmentation shows up more in resolution, aspect ratio, and CSS viewport width. That is why Oppo, Vivo, OnePlus, Honor, and Motorola belong in a global test matrix.

What are standard mobile screen sizes in pixels?

There is no single standard. For layout, use CSS viewport bands (~360–430px). For panels, 1080-wide and 1440-wide Android grids plus Apple’s per-generation maps dominate. See the common screen resolutions guide.

Design for the band, verify the viewport

Start with 6.1–6.8 inch phones. Treat under 6.2 as compact and 6.8–6.9 as large. Always verify CSS viewport and DPR, not just the marketing diagonal.

Next: open What is my viewport on a real phone, compare two models in Compare, or browse the device database.