Panel pixels and CSS width are different layers
The native display resolution is not the browser layout width at the default workspace setting. CSS columns, line lengths and breakpoints should follow the logical workspace reference.
MacBook Air 13" (M3) screen size
MacBook Air 13" (M3): 13.6″, 2560 × 1664, 224 PPI, 1470 × 956 reference scaled workspace at DPR 2. Its Retina panel is represented by a smaller scaled workspace, making this compact MacBook a useful reference for browser layouts that must remain legible without treating physical pixels as CSS width.
To proportion
13.6″
- Display size
- 13.6″ (34.5 cm) diagonalofficial
- Resolution
- 2560 × 1664 pxofficial
- Pixel density
- 224 PPIofficial
- Aspect ratio
- 20:13calculated
- Physical size (display)
- 11.4″ × 7.41″ (29 × 18.8 cm)calculated
- Scaled workspace
- 1470 × 956 pxreference
- Device pixel ratio
- 2reference
- Release year
- 2024
Model-specific guidance
What this means
The compact laptop boundary
Its workspace is narrower than the 14-inch Pro reference, so fixed navigation, code panes and data tables should be checked here before larger MacBook layouts are approved.
Scaling is part of the test matrix
Users can select other macOS display scaling modes, which change the available logical space without changing the panel itself. Treat the stored workspace as one reference state, not a universal browser size.
Compare this device
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 Air 13" (M3) Current page | MacBook Air 13" (M3) | 13.6″ | 2560 × 1664 | 1470 × 956 | 224 |
| MacBook Pro 14" (M4) The 14-inch Pro provides the next wider logical workspace and is the closest boundary for navigation, editor and table layouts. | MacBook Air 13" (M3) | 14.2″ | 3024 × 1964 | 1512 × 982 | 254 |
| MacBook Pro 16" (M4 Pro/Max) The 16-inch Pro is the wide-canvas companion and can hide compression defects that remain visible on this compact workspace. | MacBook Air 13" (M3) | 16.2″ | 3456 × 2234 | 1728 × 1117 | 254 |
For developers
For developers
/* MacBook Air 13" (M3) — scaled workspace reference */
logical workspace: 1470 × 956
panel: 2560 × 1664 · DPR 2
/* Measure the live browser viewport before writing breakpoints. */Tailwind breakpoint
xl
1280px-1535px
Bootstrap breakpoint
xxl
1400px+
Image slot example
2940 × 1654
1470px wide at DPR 2
Responsive testing plan
MacBook Air 13" (M3) responsive workflow
Use the 1470 × 956 scaled workspace reference at DPR 2 as a real QA target, then pair it with nearby widths for regression testing.
Model-specific checks
- Validate fixed sidebars, code panes and wide tables at the stored workspace, then repeat at at least one narrower macOS scaling state.
- Do not derive CSS breakpoints from the native panel resolution; record the live browser viewport for the active display setting.
Laptops with a similar screen size
Devices with a similar viewport
Sources and review dates
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-09-16
Related tools
- Device Screen SizesBrowse sourced screen sizes, resolutions, CSS viewports, DPR and PPI for phones, tablets and laptops, with links to model-level specifications.
- Laptop Screen SizesCompare sourced laptop screen sizes, native resolutions, scaled workspace references, aspect ratios and PPI, with practical responsive testing guidance.
- Screen Size ComparisonCompare display dimensions, complete video pictures and A4 page size. View screens side by side or estimate physical size after calibration.
- Viewport Size CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Responsive Breakpoint CheckerCheck the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
- Responsive Image CalculatorCalculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.
- PPI CalculatorCalculate PPI from resolution and screen size. Instant results with the formula worked through your numbers, plus physical dimensions and dot pitch.