iPhone

iPhone Duo — outer screen vs iPhone 17 Pro: screen size for websites

The iPhone 17 Pro is 20px wider and 196px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 382 and 402px will spill on the narrower one.

iPhone Duo — outer screeniPhone 17 Pro
CSS viewport382 × 678402 × 874
Visible on first load382 × 597 (Safari (iPhone Duo))402 × 718 (Safari (iOS 26))
Device pixel ratio33
Physical resolution1398 × 20341206 × 2622
Screen size5.4″6.3″
Aspect ratio13.1:919.6:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1146px1206px
Released20262025

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPhone Duo — outer screen and iPhone 17 Pro 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: 382px vs 402px

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

Height: 678px vs 874px

On first load a page shows 597px on the iPhone Duo — outer screen and 718px on the iPhone 17 Pro, so “above the fold” differs by 121px.

Questions people ask

Is the iPhone Duo — outer screen screen bigger than the iPhone 17 Pro for websites?

The iPhone 17 Pro is 20px wider and 196px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 382 and 402px will spill on the narrower one.

What are the viewport sizes of the iPhone Duo — outer screen and iPhone 17 Pro?

iPhone Duo — outer screen: 382 × 678 CSS px (DPR 3). iPhone 17 Pro: 402 × 874 CSS px (DPR 3).

Do I need to test my site on both?

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

More comparisons