MacBook Air 13″ / 15″ (M5): Screen Size & CSS Viewport

The MacBook Air M5 is arguably the most important Mac to test against because it is the machine most web developers own. At the default scaled resolution its CSS viewports are 1470×956 for the 13″ and 1710×1107 for the 15″, which represent the most common professional laptop viewport widths in real-world analytics.

The headline feature for responsive testing is the new dual external display support while the lid is open. Developers will routinely run their site on an external 1920×1080 or 2560×1440 monitor while referencing docs on the built-in 1470×956 display. If your app uses a fixed sidebar or popover that is anchored to the browser window, test it at both resolutions simultaneously to catch overflow or position bugs that only surface when the same tab is viewed across different displays.

At 1470px wide the viewport sits above Tailwind xl (1280px) and Bootstrap xxl (1400px) but below Tailwind 2xl (1536px). Any layout that switches from a single column to multi-column at 1280px or 1440px should be verified here, and so should anything that only looks right from 1536px up. The 15″ variant at 1710px is narrower than Full HD and exposes designs that assume 1920px as the minimum desktop width.