Responsive breakpoints in 2026 — the widths that matter

The widths that matter in 2026 are 360–448px for phones held upright, 744–1032px for tablets, 1280–1728px for laptops and 1920px and up for desktop monitors. Between those groups there are wide gaps where almost no real device lands, and those gaps are where your breakpoints belong. Below: the numbers from 123 devices, why you should still pick breakpoints by your content, and a short list of screens worth testing.

Where real viewports cluster

Quick definition first. A breakpoint compares against the viewport width in CSS pixels, not the screen's physical pixels. An iPhone 17 Pro has a 1206×2622 pixel panel but tells websites it is 402×874, because it packs 3×3 physical pixels into every CSS pixel. (Longer version: what is a viewport? and device pixel ratio explained.)

Here is where the 123 devices in the doesitfit database land at their default settings:

Phones: an 88px window

Every regular phone in the list is between 360 and 448px wide. The base Galaxy S23 to S26 sit at 360. Samsung's Plus, Ultra, FE and A-series default to 384. iPhones run from 375 (SE, 13 mini) to 440 (Pro Max), and Pixels from 412 to 448.

StatCounter's August 2026 numbers agree: all twelve of the most common mobile screen sizes are between 360 and 414 wide (the full breakdown).

One catch: people can make their phone narrower. An iPhone SE with Display Zoom set to Larger Text reports 320×568, and a Samsung at the largest Display size reports 320×694. So 360 is your design minimum, but 320 is where nothing should actually break.

Tablets: 744 to 1032 upright

The iPad mini is the narrowest tablet at 744. The 10–11″ iPads and 11″ Android tablets sit between 800 and 834. The 13″ iPads are 1024–1032 wide even held upright, which is laptop territory on a touch screen.

Laptops: 1280 to 1728

No laptop in the list is narrower than 1280 at its default setting, and none is wider than 1728. Windows display scaling decides a lot here: the same 1920×1080 panel reports 1920, 1536 or 1280 depending on one setting (Windows scaling explained). MacBooks land between 1408 and 1728 (MacBook sizes in CSS pixels).

Desktops: 1920 and 2560

Most monitors report 1920 or 2560. Ultrawides go to 3440 and 5120, and a few legacy 19–22″ screens still report 1280–1680.

The gaps are the useful part

• 467–666px: no device in the list, in either orientation. Every closed phone held upright is below it; every phone on its side, every opened foldable and every tablet is above it. The one near-miss: the iPhone Duo's outer screen on its side is 678 wide, but its side strip should leave pages about 594 (calculated, not measured).
• 999–1023px: only a Galaxy Z Flip 6 on its side (1006).
• 1033–1279px: only iPads on their side (1080–1210). No laptop, no monitor.

A breakpoint inside a gap splits devices cleanly. A breakpoint on top of a cluster splits phones that are practically the same: put one at 400px and the iPhone 16 (393) and iPhone 17 (402) get different layouts over a 9px difference.

Content-first breakpoints beat device lists

Device widths move every year. iPhones went from 375 to 390 to 393 to 402 in a few generations, and the big model grew from 428 to 440. A breakpoint list copied from "popular devices" is out of date before you ship it.

The better method:

1. Build the phone layout first, at 360px wide, with no media query at all.
2. Widen the window slowly until something looks wrong: lines of text get too long, cards stretch, the nav has room to spread out.
3. Add a breakpoint there.
4. Check it against the table above. If it lands on a cluster of real devices, nudge it into the nearest gap.

That usually gives you two or three breakpoints, not six. Something like this:

/* Phone layout is the default: no media query */
.cards { display: grid; gap: 16px; }

/* Room for two columns: phones on their side, foldables, tablets */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Room for a sidebar: 13-inch iPads, tablets on their side, every laptop */
@media (min-width: 1024px) {
  .page { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Fluid sizing cuts the number of breakpoints further. clamp() and min() let type and containers scale smoothly instead of jumping:

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }

That .wrap keeps 16px of breathing room on each side of a phone and stops at 1200px on big screens. More on edge spacing in mobile padding that works.

Framework defaults

Tailwind and Bootstrap both put their first breakpoint inside the empty 467–666 gap (640 and 576), so every upright phone gets the base layout. Their shared 768 lands among phones on their side, and it sits exactly on the old iPad 9.7″ held upright. Bootstrap's 992 catches the Pixel 10 Pro XL on its side (998), and its 1200 splits the iPad Pro 11″ models on their side (1194 vs 1210). Class-by-class detail: Tailwind breakpoints on real devices.

Don't forget phones on their side

A phone on its side is 667–1006px wide but only 360–466px tall. An iPhone 17 Pro in landscape is 874px across, and with Safari's bars it leaves about 337px of height for your page (an estimate: 402 minus a 44px address bar and a 21px home-indicator strip). That is your tablet layout squeezed into a letterbox. Sticky headers, full-height heroes and cookie banners are the usual casualties.

/* Phones on their side: wide enough for the tablet layout, not tall enough */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header { position: static; }
  .hero { min-height: auto; padding-block: 24px; }
}

Why 500px: every closed phone in the list is 360–466px tall on its side, the smallest tablet on its side is 744px tall, and no laptop screen is shorter than 720px. The heights iPhone users really get are in how much of the screen iPhone users see in Safari, and the fix for full-height sections is in 100vh on mobile.

Container queries for components

Media queries ask how wide the screen is. A card doesn't care about the screen. It cares how wide its own slot is, and the same card might sit in a 1100px main column and a 300px sidebar on the same laptop.

Container queries let a component respond to its container instead:

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

.card { display: grid; gap: 12px; }

@container (min-width: 420px) {
  .card { grid-template-columns: 160px 1fr; }
}

They have worked in Chrome, Safari and Firefox since early 2023. A good split: media queries for the page (columns, nav, sidebar), container queries for the pieces inside it.

A short list of screens to test

You don't need 123 screens. These eleven cover every cluster and every gap edge:

If you have a max-width container, add a 2560×1440 monitor to check it doesn't leave a thin column floating in a sea of white. The full catalogue is at /devices and /screen-sizes.

doesitfit.lol loads these side by side and puts a sticker on each one: FITS, TIGHT (text within 8px of the edge) or SPILLING (the page scrolls sideways). The Popular mix preset loads six of them in one click. If something spills, the horizontal scroll fix is the usual next stop.

The short version

• Real devices cluster at 360–448 (phones), 744–1032 (tablets), 1280–1728 (laptops) and 1920+ (monitors).
• Put breakpoints where your content breaks, then nudge them into the gaps: 467–666, 999–1023 and 1033–1279 are nearly empty.
• Two or three breakpoints plus clamp() and min() beat a list of devices.
• Handle phones on their side with a max-height query, and components with container queries.
• Test the eleven screens above, not just the one on your desk.