iPhoneGoogle Pixel

iPhone 17 Pro vs Google Pixel 10: screen size for websites

The Google Pixel 10 is 10px wider and 50px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 402 and 412px will spill on the narrower one.

iPhone 17 ProGoogle Pixel 10
CSS viewport402 × 874412 × 924
Visible on first load402 × 718 (Safari (iOS 26))412 × 786 (Chrome (Android))
Device pixel ratio32.625
Physical resolution1206 × 26221080 × 2424
Screen size6.3″6.3″
Aspect ratio19.6:920.2:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1206px1082px
Released20252025

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPhone 17 Pro and Google Pixel 10 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: 402px vs 412px

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

Height: 874px vs 924px

On first load a page shows 718px on the iPhone 17 Pro and 786px on the Google Pixel 10, so “above the fold” differs by 68px.

Questions people ask

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

The Google Pixel 10 is 10px wider and 50px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 402 and 412px will spill on the narrower one.

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

iPhone 17 Pro: 402 × 874 CSS px (DPR 3). Google Pixel 10: 412 × 924 CSS px (DPR 2.625).

Do I need to test my site on both?

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

More comparisons