iPhone

iPhone 17 Pro vs iPhone 17 Pro Max: screen size for websites

The iPhone 17 Pro Max is 38px wider and 82px taller in CSS pixels. That’s enough for a layout that fits the iPhone 17 Pro Max to spill on the iPhone 17 Pro.

iPhone 17 ProiPhone 17 Pro Max
CSS viewport402 × 874440 × 956
Visible on first load402 × 718 (Safari (iOS 26))440 × 800 (Safari (iOS 26))
Device pixel ratio33
Physical resolution1206 × 26221320 × 2868
Screen size6.3″6.9″
Aspect ratio19.6:919.6:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1206px1320px
Released20252025

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPhone 17 Pro and iPhone 17 Pro Max 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 440px

Headings and buttons wrap differently: a line that fits in 440px 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 956px

On first load a page shows 718px on the iPhone 17 Pro and 800px on the iPhone 17 Pro Max, so “above the fold” differs by 82px.

Questions people ask

Is the iPhone 17 Pro screen bigger than the iPhone 17 Pro Max for websites?

The iPhone 17 Pro Max is 38px wider and 82px taller in CSS pixels. That’s enough for a layout that fits the iPhone 17 Pro Max to spill on the iPhone 17 Pro.

What are the viewport sizes of the iPhone 17 Pro and iPhone 17 Pro Max?

iPhone 17 Pro: 402 × 874 CSS px (DPR 3). iPhone 17 Pro Max: 440 × 956 CSS px (DPR 3).

Do I need to test my site on both?

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

More comparisons