MacBook Pro 14″ viewport size and resolution

The MacBook Pro 14″ has a 1512×982 CSS pixel screen, a device pixel ratio (DPR) of 2 and a physical resolution of 3024×1964. With Chrome maximized, the page gets 1512×864.

Screen
1512×982
Chrome maximized
1512×864
DPR
2
Physical
3024×1964
MacBook Pro 14″ in Breakpane, App mode, with Lume open and the viewport dimension lines
Breakpane capture in App mode (installed PWA). The dimension lines show the viewport the page measured inside the device; system bars that stay reserved are not counted.

Measurements

MacBook Pro 14″ measurements in CSS pixels
Screen1512×982
Device pixel ratio (DPR)2
Physical resolution3024×1964
Menu bar32 px
Space left for windows1512×950
Maximized Chrome viewport1512×864
Installed app (PWA) viewport, maximized1512×912
OSmacOS

CSS for the MacBook Pro 14″

Media query by width

Breakpoints are written in CSS pixels, never in physical resolution.

/* MacBook Pro 14″: maximized window, 1512 CSS px wide */
@media (max-width: 1512px) {
  /* … */
}

/* screens with a DPR of 2 or more */
@media (min-resolution: 2dppx) {
  /* 2x images */
}

How Breakpane emulates the MacBook Pro 14″

Breakpane opens the MacBook Pro 14″ as a 1512×982 screen with the device's frame, density (2), the user agent of Chrome on macOS and the system bars, floating in front of your editor with your dev server live.

More devices: Laptops

All devices

Measurements from Breakpane's device catalog, checked against public sources (the Chrome DevTools device list, useyourloaf.com, deviceatlas.com, yesviz.com, webmobilefirst.com and 1440px.com) between Oct 2, 2026 and Oct 5, 2026.