iPhone

iPhone 16 vs iPhone 17: screen size for websites

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

iPhone 16iPhone 17
CSS viewport393 × 852402 × 874
Visible on first load393 × 699 (Safari (iOS 26))402 × 718 (Safari (iOS 26))
Device pixel ratio33
Physical resolution1179 × 25561206 × 2622
Screen size6.1″6.3″
Aspect ratio19.5:919.6:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1179px1206px
Released20242025

See your site on both, side by side

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

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

Height: 852px vs 874px

On first load a page shows 699px on the iPhone 16 and 718px on the iPhone 17, so “above the fold” differs by 19px.

Questions people ask

Is the iPhone 16 screen bigger than the iPhone 17 for websites?

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

What are the viewport sizes of the iPhone 16 and iPhone 17?

iPhone 16: 393 × 852 CSS px (DPR 3). iPhone 17: 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