CSS viewport 1470 × 956 pixels at 2× device pixel ratio. The exact size browsers report on the MacBook Air 13″ (M4 / M5).
The MacBook Air 13″ (M4 / M5) viewport is 1470 × 956 CSS pixels, with a device pixel ratio of 2 on a 2560 × 1664 pixel 13.6″ display.
Test your site at MacBook Air 13″ (M4 / M5) (1470 × 956)
When a user visits your site on the MacBook Air 13″ (M4 / M5), the browser reports window.innerWidth = 1470 and window.devicePixelRatio = 2. Your CSS media queries match against the 1470px CSS width, not the 2560 × 1664 physical pixel count of the panel.
At 1470px it hits Tailwind xl (1280px) and Bootstrap xxl (1400px).
For sharp full-width images, serve a source at least 2940px wide (1470 CSS px × 2 DPR) through srcset and let the browser pick it.
/* MacBook Air 13″ (M4 / M5): 1470×956 CSS px, DPR 2 */
@media (max-width: 1470px) {
/* styles for this width and narrower */
}
@media (min-resolution: 2dppx) {
/* serve high-density assets */
}The MacBook Air 13″ (M4 / M5) reports a CSS viewport of 1470×956 pixels. Browser toolbars reduce the visible height slightly, so window.innerHeight is usually smaller than the full screen height.
The MacBook Air 13″ (M4 / M5) uses a default device pixel ratio of 2. Each CSS pixel maps to 2×2 physical pixels on its 2560×1664 panel (default scaled resolution).
At 1470px wide it matches Tailwind xl (min-width 1280px) and Bootstrap xxl (min-width 1400px).
Open screensize.io, enter your URL and pick MacBook Air 13″ (M4 / M5) (1470×956). It opens your site in a real browser window at exactly that CSS viewport, so media queries, container queries and JavaScript resize logic behave as they would on the device. For touch behaviour and the real browser engine, confirm on hardware before shipping.
See the full list of device viewport sizes →
Or browse common screen sizes by category →
Use screensize.io to preview your website at any of these resolutions instantly — no DevTools needed.
Open screensize.io →