MacBook Pro 14" (M4): 14.2″, 3024 × 1964, 254 PPI, 1512 × 982 reference scaled workspace at DPR 2. Its recorded workspace sits between the compact Air and the larger Pro. The small increase over the Air helps quantify a nearby desktop reference, while actual browser window dimensions determine whether a layout fits.
The reference workspace is only slightly wider than the Air. Whether a sidebar or editor pane fits depends on the application's width budget and window settings; the model change alone does not establish room for an extra pane.
Native panel pixels, a scaled desktop workspace and a browser layout viewport describe different rectangles. Use the live viewport for CSS composition, and check bitmap or canvas density separately.
A layout that fits here may still fail on the Air, while a layout that looks comfortable on the 16-inch Pro may reveal hidden fixed-width assumptions only when brought back to this workspace.
Worked example · reference dimensions
The recorded workspace places MacBook Pro 14" (M4) between MacBook Air 13" (M3) and MacBook Pro 16" (M4 Pro/Max). It is 42 logical px wider than the compact reference and 216 logical px narrower than the larger one. The table changes are relative to MacBook Pro 14" (M4); a negative value means less workspace.
| Model | Panel pixels | Reference workspace (logical px) | Width / height change (logical px) |
|---|---|---|---|
| MacBook Air 13" (M3) | 2560 × 1664 | 1470 × 956 | -42 / -26 |
| MacBook Pro 14" (M4) | 3024 × 1964 | 1512 × 982 | Baseline |
| MacBook Pro 16" (M4 Pro/Max) | 3456 × 2234 | 1728 × 1117 | 216 / 135 |
A useful counterexample is MacBook Air 13" (M3): its native width divided by the recorded DPR is 2560 ÷ 2 = 1280, which is different from its 1470-wide workspace reference.
A native panel, a scaled desktop workspace and a browser window describe different rectangles. Workspace differences use the stored reference settings; other macOS scaling modes can change them. Read the actual browser layout viewport for CSS testing. Window size, zoom and docked developer tools can change it; dividing panel pixels by DPR is not a universal workspace calculation.
CSS canvas, DPR and workspace values are references, not manufacturer guarantees or live browser measurements. Matching references alone do not guarantee identical fonts, line breaks or rendering across real devices.
These are the dates of the recorded fact checks. A hardware specification source does not establish a browser viewport. Calculations and illustration assumptions are described above; no new device measurements are claimed.
The specifications below come from the device records; the notes explain why each comparison is useful.
| Device configuration | Matched to | Screen | Panel | Viewport / workspace | PPI |
|---|---|---|---|---|---|
| MacBook Pro 14" (M4) Current page | MacBook Pro 14" (M4) | 14.2″ | 3024 × 1964 | 1512 × 982 | 254 |
| MacBook Air 13" (M3) The Air is the narrower logical-workspace boundary for checking navigation collapse, editor wrapping and table overflow. | MacBook Pro 14" (M4) | 13.6″ | 2560 × 1664 | 1470 × 956 | 224 |
| MacBook Pro 16" (M4 Pro/Max) The 16-inch Pro supplies the wide desktop reference and shows which multi-pane layouts depend on extra logical space. | MacBook Pro 14" (M4) | 16.2″ | 3456 × 2234 | 1728 × 1117 | 254 |
/* MacBook Pro 14" (M4) — scaled workspace reference */
logical workspace: 1512 × 982
panel: 3024 × 1964 · DPR 2
/* Measure the live browser viewport before writing breakpoints. */Use the 1512 × 982 scaled workspace reference at DPR 2 as a real QA target, then pair it with nearby widths for regression testing.
Values marked official come from manufacturer specifications; calculated values are derived from them; reference values are developer layout references and can vary with browser, zoom and operating-system settings.
Sources: Apple Support · Facts reviewed 2026-09-16
Content reviewed 2026-10-22