Google Pixel 11 / 11 Pro / 11 Pro XL: Screen Size & CSS Viewport

The Pixel 11 lineup reuses the panel resolutions of the Pixel 10 family: 2424×1080 on the 6.3″ Pixel 11, 2856×1280 on the 6.3″ Pixel 11 Pro and 2992×1344 on the 6.8″ Pixel 11 Pro XL. That puts the CSS viewports at roughly 412×924, 410×914 and 448×997. The base model value is well documented for the Pixel 10, while the Pro values are derived from physical resolution divided by the default device pixel ratio, so they may differ by a pixel or two depending on the display resolution setting.

All three widths fall inside your base mobile styles, below Tailwind sm (640px) and Bootstrap sm (576px). The spread between 410px and 448px matters more than it looks: a two-column card grid or a row of four icons can fit on the Pro XL and wrap on the Pro. The tall 20:9 shape means about 900 to 1000 CSS pixels of height, so above-the-fold content has more room than on an iPhone, but long forms still need clear progress cues.

For your test pass, cover 410px and 448px as the two Pixel extremes, check that line lengths stay readable at 448px where single-column text gets noticeably wider, and confirm that sticky bottom navigation does not collide with the Android gesture bar. Serve full-width images at up to 1344px wide for the Pro XL panel.

The Pixel 11 Pro Fold launched alongside the phones with an 8.0″ inner display at 2076×2152 pixels, estimated at about 791×820 CSS pixels. That near-square viewport sits between Tailwind md (768px) and lg (1024px) and deserves its own check if you see foldable traffic.