MacBook Pro 16″ (M5 Pro / Max) Screen Size & Viewport

Why this viewport matters

When a user visits your site on the MacBook Pro 16″ (M5 Pro / Max), the browser reports window.innerWidth = 1728 and window.devicePixelRatio = 2. Your CSS media queries match against the 1728px CSS width, not the 3456 × 2234 physical pixel count of the panel.

At 1728px it hits Tailwind 2xl (1536px) and Bootstrap xxl (1400px).

For sharp full-width images, serve a source at least 3456px wide (1728 CSS px × 2 DPR) through srcset and let the browser pick it.

/* MacBook Pro 16″ (M5 Pro / Max): 1728×1117 CSS px, DPR 2 */
@media (max-width: 1728px) {
  /* styles for this width and narrower */
}

@media (min-resolution: 2dppx) {
  /* serve high-density assets */
}