MacBookmacOS · laptop · 2020

MacBook Air 13″ (M1) / Pro 13″ viewport size

1440 × 900CSS px · 2× DPR · 2560×1600 physical

By default the MacBook Air 13″ (M1) / Pro 13″ gives a full-screen web page a 1440 × 900 CSS pixel viewport, drawn on a 2560 × 1600 pixel panel (device pixel ratio 2). That’s the size your media queries see, and it changes if the owner picks a different scaling option (listed below).

CSS viewport (portrait)1440 × 900what web pages get
Aspect ratio16:10width : height
Device pixel ratio2×1 CSS px = 2 × 2 screen pixels
Physical resolution2560 × 160013.3″ screen
Visible in the browser1440 × 789Chrome (macOS), first load
Released2020macOS laptop

See your site on a MacBook Air 13″ (M1) / Pro 13″

Paste your address (or localhost:3000). doesitfit shows it at exactly 1440 × 900, with Chrome (macOS)’s bars if you want them, and tells you if anything spills.

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

What a web page actually sees

The full viewport is 1440 × 900, but the browser’s own bars take some of it. In Chrome (macOS) a page gets about 1440 × 789 on first load (24px menu bar and Chrome’s 87px tab strip + toolbar, maximized window, Dock hidden). That’s your real “above the fold”.

SettingWidthHeight
Full viewport1440px900px
Visible on first load (Chrome (macOS))1440px789px

What it means for your CSS

Breakpoints

At 1440px: Tailwind uses xl (sm: md: lg: xl: styles apply); Bootstrap uses xxl.

Tailwind breakpoints on real devices

Content width

With 16px of padding on each side your text column is 1408px; with 24px it’s 1392px. Text closer than 8px to the edge looks cramped (more).

Sharp images

A full-width image needs about 2880px of real pixels (1440 × 2).

<img src="hero-2880.jpg"
  srcset="hero-800.jpg 800w, hero-2880.jpg 2880w"
  sizes="100vw" alt="…">

Styles for this width

Content-first breakpoints beat device lists, but if something breaks at this width:

@media (max-width: 1440px) {
  /* screens 1440px wide and narrower */
}

Other display size settings

The scaling the owner picks changes the viewport your site gets:

SettingCSS viewport
Default (default)1440 × 900
Larger text1024 × 640
Scaled1280 × 800
More space1680 × 1050

How common is 1440 × 900?

1440 × 900 is the #6 most common desktop screen size worldwide, with 1.95% of desktop traffic (Aug 2026, StatCounter).

Same viewport:

Close in size:

Everything about the 1440 × 900 viewport · All devices 1440px wide · All MacBook sizes

Questions people ask

What is the viewport size of the MacBook Air 13″ (M1) / Pro 13″?

1440 × 900 CSS pixels, with a device pixel ratio of 2. The screen itself is 2560 × 1600 physical pixels.

How much of the MacBook Air 13″ (M1) / Pro 13″ screen does a web page get in Chrome?

About 1440 × 789 on first load: the 24px menu bar and Chrome’s 87px tab strip + toolbar, maximized window, Dock hidden. Design your first screen for that height, not the full 900px.

Which CSS breakpoint does the MacBook Air 13″ (M1) / Pro 13″ fall into?

At 1440px wide, Tailwind CSS uses xl (sm: md: lg: xl: styles apply) and Bootstrap uses its xxl tier.

How wide should images be for the MacBook Air 13″ (M1) / Pro 13″?

A full-width image needs about 2880px of real pixels (1440 CSS px × DPR 2) to look sharp. Use srcset so smaller screens don’t download it.

How can I test my website on a MacBook Air 13″ (M1) / Pro 13″ without one?

Open doesitfit.lol, paste your address (localhost works too) and pick the MacBook Air 13″ (M1) / Pro 13″. It shows your site at exactly 1440 × 900 CSS pixels and flags anything that spills past the edge.

Guides that help

About these numbers

Confidence: High: confirmed by more than one independent source. MacBook default scalings are not exactly 2× the panel (e.g. a 2560×1664 Air defaults to 1470×956); CSS still reports DPR 2. MacBook Neo values are from Apple specs and owner reports; they have not been measured in a browser yet.

Sources include DeviceAtlas, Chrome DevTools device list (EmulatedDevices.ts), iosref.com, ios-resolution.com. Researched September 2026.