CSS viewport 1512 × 982 pixels at 2× device pixel ratio. The exact size browsers report on the MacBook Pro 14″ (M5).
The MacBook Pro 14″ (M5) viewport is 1512 × 982 CSS pixels, with a device pixel ratio of 2 on a 3024 × 1964 pixel 14.2″ display.
Test your site at MacBook Pro 14″ (M5) (1512 × 982)
When a user visits your site on the MacBook Pro 14″ (M5), the browser reports window.innerWidth = 1512 and window.devicePixelRatio = 2. Your CSS media queries match against the 1512px CSS width, not the 3024 × 1964 physical pixel count of the panel.
At 1512px it hits Tailwind xl (1280px) and Bootstrap xxl (1400px).
For sharp full-width images, serve a source at least 3024px wide (1512 CSS px × 2 DPR) through srcset and let the browser pick it.
/* MacBook Pro 14″ (M5): 1512×982 CSS px, DPR 2 */
@media (max-width: 1512px) {
/* styles for this width and narrower */
}
@media (min-resolution: 2dppx) {
/* serve high-density assets */
}The MacBook Pro 14″ (M5) reports a CSS viewport of 1512×982 pixels. Browser toolbars reduce the visible height slightly, so window.innerHeight is usually smaller than the full screen height.
The MacBook Pro 14″ (M5) uses a default device pixel ratio of 2. Each CSS pixel maps to 2×2 physical pixels on its 3024×1964 panel.
At 1512px wide it matches Tailwind xl (min-width 1280px) and Bootstrap xxl (min-width 1400px).
Open screensize.io, enter your URL and pick MacBook Pro 14″ (M5) (1512×982). 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 →