iPhone

iPhone 14 / 13 / 12 vs iPhone 15 / 15 Pro: screen size for websites

The iPhone 15 / 15 Pro is 3px wider and 8px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 390 and 393px will spill on the narrower one.

iPhone 14 / 13 / 12iPhone 15 / 15 Pro
CSS viewport390 × 844393 × 852
Visible on first load390 × 703 (Safari (iOS 26))393 × 699 (Safari (iOS 26))
Device pixel ratio33
Physical resolution1170 × 25321179 × 2556
Screen size6.1″6.1″
Aspect ratio19.5:919.5:9
Tailwind breakpointbase styles onlybase styles only
Bootstrap tierxsxs
Full-width image needs1170px1179px
Released20222023

See your site on both, side by side

Paste your address (or localhost:3000). doesitfit shows it on the iPhone 14 / 13 / 12 and iPhone 15 / 15 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: 390px vs 393px

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

Height: 844px vs 852px

On first load a page shows 703px on the iPhone 14 / 13 / 12 and 699px on the iPhone 15 / 15 Pro, so “above the fold” differs by 4px.

Questions people ask

Is the iPhone 14 / 13 / 12 screen bigger than the iPhone 15 / 15 Pro for websites?

The iPhone 15 / 15 Pro is 3px wider and 8px taller in CSS pixels. Small enough that most layouts behave the same, but fixed widths between 390 and 393px will spill on the narrower one.

What are the viewport sizes of the iPhone 14 / 13 / 12 and iPhone 15 / 15 Pro?

iPhone 14 / 13 / 12: 390 × 844 CSS px (DPR 3). iPhone 15 / 15 Pro: 393 × 852 CSS px (DPR 3).

Do I need to test my site on both?

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

More comparisons