MacBook viewport sizes (CSS pixels)

MacBooks don’t run at half their panel resolution by default: a 2560×1664 MacBook Air “looks like” 1470×956. These are the default CSS viewports, plus the other scaling options people pick.

6 devices·widths 1408–1728px·updated September 2026

DeviceCSS viewportDPRPhysical pixelsYear
MacBook Air 13″ (M2–M5)1470×95622560×16642026
MacBook Air 15″ (M2–M5)1710×110722880×18642026
MacBook Pro 14″ (2021–2026)1512×98223024×19642026
MacBook Pro 16″ (2021–2026)1728×111723456×22342026
MacBook Neo 13″1408×88122408×15062026
MacBook Air 13″ (M1) / Pro 13″1440×90022560×16002020

Try your site on every MacBook size at once

Paste your address (or localhost:3000). doesitfit shows it on real screen sizes at once and tells you, bluntly, where it spills.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

What to take from this

Narrowest: 1408px

The MacBook Neo 13″. If your layout survives this width with 16px of padding on each side (1376px of content), it survives the rest.

Widest: 1728px

The MacBook Pro 16″ (2021–2026). Check that lines of text don’t get uncomfortably long and that your sm/md breakpoints kick in when you expect.

Questions people ask

What are the most common MacBook viewport widths?

MacBook viewports here range from 1408px (MacBook Neo 13″) to 1728px (MacBook Pro 16″ (2021–2026)) wide. The most common width in this list is 1470px (1 device).

Which MacBook sizes should I test?

Test the narrowest (1408px), the most common (1470px) and the widest (1728px). If those three look right, the sizes in between almost always do too.

Is the viewport the same as the screen resolution?

No. The viewport is measured in CSS pixels, which is the screen resolution divided by the device pixel ratio (and by any display scaling). Media queries use the viewport.

Guides that help

Other devices