Free reference
Mobile Screen Sizes & Viewports
A quick reference of popular phone screen sizes — CSS viewport dimensions, physical resolution, and device pixel ratio. Search and copy what you need.
| Device | Viewport (CSS) | Resolution | DPR | |
|---|---|---|---|---|
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | @3x | |
| iPhone 15 / 15 Pro | 393 × 852 | 1179 × 2556 | @3x | |
| iPhone 14 / 13 | 390 × 844 | 1170 × 2532 | @3x | |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | @3x | |
| iPhone SE (3rd gen) | 375 × 667 | 750 × 1334 | @2x | |
| iPhone 13 mini | 375 × 812 | 1125 × 2436 | @3x | |
| Pixel 8 Pro | 448 × 998 | 1344 × 2992 | @3x | |
| Pixel 8 | 412 × 915 | 1080 × 2400 | @2.625x | |
| Pixel 7 | 412 × 915 | 1080 × 2400 | @2.625x | |
| Samsung Galaxy S24 Ultra | 480 × 1006 | 1440 × 3120 | @3x | |
| Samsung Galaxy S24 / S23 | 360 × 780 | 1080 × 2340 | @3x | |
| Samsung Galaxy A54 | 393 × 873 | 1080 × 2400 | @2.75x |
Viewport = logical CSS pixels (portrait). Multiply by DPR for physical resolution.
FAQ
What's the difference between viewport and resolution?
The viewport is the logical CSS pixel size you design and code against. The physical resolution is the actual pixel count — viewport multiplied by the device pixel ratio (DPR).
Which size should I design for?
Design against the CSS viewport (logical) dimensions. A common safe baseline for modern phones is around 390–430px wide in portrait.
Now design the whole app.
Bender turns a prompt into a full set of themed mobile screens you can edit, test, and export. Free to start — no credit card.
Try Bender free