Google Pixel

Google Pixel 10 Pro vs Google Pixel 10 Pro XL: screen size for websites

The Google Pixel 10 Pro XL is 21px wider and 46px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 427 and 448px will spill on the narrower one.

Google Pixel 10 ProGoogle Pixel 10 Pro XL
CSS viewport427 × 952448 × 998
Visible on first load427 × 804 (Chrome (Android))448 × 852 (Chrome (Android))
Device pixel ratio2.531252.25
Physical resolution1280 × 28561344 × 2992
Screen size6.3″6.8″
Aspect ratio20.1:920:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1081px1008px
Released20252025

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the Google Pixel 10 Pro and Google Pixel 10 Pro XL at their exact sizes, next to each other.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

What the difference means for your site

Width: 427px vs 448px

Headings and buttons wrap differently: a line that fits in 448px can break onto two lines in 427px. Anything with a fixed width between the two makes the narrower screen scroll sideways (fix it).

Height: 952px vs 998px

On first load a page shows 804px on the Google Pixel 10 Pro and 852px on the Google Pixel 10 Pro XL, so “above the fold” differs by 48px.

Questions people ask

Is the Google Pixel 10 Pro screen bigger than the Google Pixel 10 Pro XL for websites?

The Google Pixel 10 Pro XL is 21px wider and 46px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 427 and 448px will spill on the narrower one.

What are the viewport sizes of the Google Pixel 10 Pro and Google Pixel 10 Pro XL?

Google Pixel 10 Pro: 427 × 952 CSS px (DPR 2.53125). Google Pixel 10 Pro XL: 448 × 998 CSS px (DPR 2.25).

Do I need to test my site on both?

Yes if your layout has anything close to 448px wide. Test the narrower one first: it’s where things spill.

More comparisons