MacBook screen resolution vs CSS pixels, every model

Websites never see a MacBook's panel resolution. A MacBook Air 13″ has a 2560×1664 pixel panel, but at the default setting macOS makes it "look like" 1470×956, and that's the size in CSS pixels your media queries see, with a devicePixelRatio (DPR) of 2. Here are the numbers for every MacBook, why the default isn't simply half the panel, and how much of the screen a maximized Chrome window actually gives your page.

Every MacBook: panel vs CSS size

The MacBook Neo default comes from owner reports, since Apple doesn't list it, and hasn't been measured in a browser yet. Everything else is well documented. All of them are on the MacBook hub.

A CSS pixel is the unit your CSS and media queries use. The DPR says how many device pixels make up one CSS pixel in each direction. If those two terms are new, start with what is a viewport? and device pixel ratio explained.

Why the default isn't exactly half the panel

On the 14″ and 16″ MacBook Pro, the default is exactly half the panel in each direction: 3024 ÷ 2 = 1512. Every CSS pixel is a neat 2×2 block of real pixels.

The Airs, the Neo and the older 13″ models work differently. Their default is a scaled mode. macOS draws the whole screen at twice the "looks like" size, then shrinks that image to fit the panel:

• MacBook Air 13″: drawn at 2940×1912, shown on a 2560×1664 panel
• MacBook Air 15″: drawn at 3420×2214, shown on a 2880×1864 panel
• MacBook Air M1: drawn at 2880×1800, shown on a 2560×1600 panel

The browser only knows about the first step, so it reports a DPR of 2. In reality one CSS pixel on a MacBook Air 13″ covers about 1.74 physical pixels (2560 ÷ 1470). The result is more room than an exact 2× mode would give (1470px wide instead of 1280) and text that is slightly smaller.

What that means for you:

• Media queries see 1470, not 2560 and not 1280.
• Images should still be served at 2× their CSS size. A photo shown 700 CSS px wide needs a 1400px source to look sharp, and srcset handles that for you (responsive images by example).
• Hairlines like 0.5px borders don't map onto exactly one physical pixel in a scaled mode, so they can look slightly soft. A 1px border is the safe choice.

The other settings (and why they matter)

In System Settings → Displays, Mac users can pick from Larger Text to More Space. Each option changes the CSS size your site sees:

The DPR stays at 2 in every one of these. The interesting column is Larger text: someone who picks it on a MacBook Air is on a 1024px-wide screen, which is iPad territory and exactly where Tailwind's lg starts. It's the obvious pick for anyone who finds the default text too small, so your tablet layout should look good on a laptop too. Tailwind breakpoints on real devices maps where each setting lands.

Browser zoom does a similar thing on top. Zoom Chrome to 110% on a MacBook Air 13″ and the page gets about 1336 CSS px of width (1470 ÷ 1.1).

The notch and the menu bar

The Airs from M2 on and the 14″ and 16″ Pros have a camera notch at the top of the screen. It sits inside the menu bar, which is taller on these models to make room:

A normal browser window starts below the menu bar, so your page never has to dodge the notch. But the screen height macOS reports (956 on the Air 13″) includes the menu bar, and your page doesn't get those pixels.

How much a maximized Chrome window shows

Chrome's tab strip plus toolbar is 87px tall on macOS (measured). With the window maximized and the Dock hidden, the page viewport is:

And it shrinks from there:

• Bookmarks bar showing: 34px more. An Air 13″ drops to 1470×798.
• Dock visible at the bottom: roughly 64px more. With both, an Air 13″ is down to about 1470×734.

These numbers are for Chrome. Safari's toolbar is a different height and isn't covered here.

So the most popular MacBook shows a desktop-width page with about 730–830px of height. A hero section designed on a 1920×1080 Windows monitor, where Chrome leaves about 945px, will be cut off.

External monitors on a Mac

Plug a monitor into a Mac and the same "looks like" logic applies:

• A 27″ 4K monitor defaults to looking like 1920×1080 at DPR 2, with 2560×1440 and 3008×1692 as options.
• Apple's Studio Display (5K) defaults to 2560×1440 at DPR 2, with 1920×1080 (Larger text) and 3200×1800 (More space) as options.
• The Pro Display XDR (6K) is 3008×1692, and the iMac 24″ is 2240×1260, both at DPR 2.

So a Mac user on a 4K monitor gets the same CSS width as someone on a standard 1080p monitor, just twice as sharp. Your layout is the same; your images need 2× sources. All monitors are listed at /devices/monitors.

How to test MacBook sizes

1. On your own Mac: open /whats-my-viewport. It shows the viewport and DPR live, so you can switch display settings and watch them change.
2. In doesitfit: the Laptops preset puts the MacBook Air 13″, MacBook Pro 14″ and MacBook Pro 16″ next to two Windows laptops. Each MacBook has a Display scaling menu with the settings above, and Browser bars adds the menu bar and Chrome's 87px so you see the real page area.
3. In DevTools: use a custom size of 1470×832, not 1470×956. Just remember DevTools device mode has its own blind spots.

If you build with AI, this prompt covers the usual MacBook problems:

Check my site on a MacBook Air 13: the page viewport in Chrome is 1470×832 CSS px at devicePixelRatio 2. Make sure the hero's headline and main button are visible without scrolling at 832px of height, nothing is sized with 100vh in a way that pushes the button below the fold, and every image has a 2× source via srcset. Also check the layout at 1024×665, which is what the Larger Text display setting gives.

What to take away

• MacBooks are 1408–1728 CSS px wide at their defaults, all at DPR 2.
• Only the 14″ and 16″ Pros are exactly half their panel; the Airs and the Neo use scaled modes.
• The notch lives in a 37–38px menu bar that your page never gets.
• A maximized Chrome window on a MacBook Air 13″ leaves about 1470×832, less with the Dock or bookmarks bar showing.
• Test the Larger Text setting too: it turns a MacBook into a 1024px-wide screen.
• For the Windows side of the same story, read Windows display scaling and the 1536×864 viewport.