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