Current iPhones have screens from 6.1 to 6.9 inches, with CSS viewport widths from 390 to 440 pixels. The iPhone 18 Pro and iPhone 17 have a 6.3-inch screen and a 402 × 874 viewport; the iPhone 18 Pro Max and 17 Pro Max have a 6.9-inch screen and a 440 × 956 viewport; the iPhone 17e has a 6.1-inch screen and a 390 × 844 viewport. The chart below lists every model back to the original iPhone SE.
How to read the chart
- Screen size is the diagonal in inches, as Apple quotes it. On models with rounded corners, the actual viewable area is slightly smaller.
- Resolution is the physical pixel count of the display, portrait.
- CSS viewport is what a web page sees in Safari in portrait with a correct viewport meta tag: resolution divided by the pixel ratio. This is the number to use for responsive design and media queries.
- Pixel ratio (DPR) is how many physical pixels make up one CSS pixel in each direction.
iPhone screen size chart (2016–2026)
| Model | Year | Screen | Resolution | CSS viewport | Pixel ratio |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6.5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6.9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6.3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6.7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6.1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3rd gen) | 2022 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5.4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6.7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6.1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5.4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2nd gen) | 2020 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6.5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6.1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6.5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6.1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5.8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5.5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5.5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4.7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1st gen) | 2016 | 4.0” | 640 × 1136 | 320 × 568 | 2 |
* The Plus models render at 1242 × 2208 and scale down to the 1080 × 1920 panel, so the reported pixel ratio is 3 while the physical ratio is about 2.6. The iPhone 12 mini and 13 mini similarly render a 375 px wide viewport on a panel slightly smaller than 3x would need.
Sources: Apple’s technical specifications pages for each model (screen size and resolution); viewport values are resolution divided by pixel ratio. Check Apple’s specs page for the newest models, as Apple adds them each year.
Viewport widths web designers actually need
Out of all those models, only a handful of widths matter for layout:
| CSS width | Models |
|---|---|
| 375 px | SE (2nd and 3rd gen), 8, mini models, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Plus and Pro Max models |
If your layout works fluidly from 375 to 440 px, it works on every iPhone sold in the last eight years. Test 320 px too if you want to be safe with older devices and zoomed-in text. For everything between and beyond phones, see responsive breakpoints.
Which iPhone has the biggest and smallest screen?
The biggest iPhone screens are the 6.9-inch Pro Max models: iPhone 16 Pro Max, 17 Pro Max and 18 Pro Max. The smallest current-generation screen is 6.1 inches (iPhone 16e and 17e). The smallest iPhone with a modern edge-to-edge design was the 5.4-inch iPhone 13 mini, and the smallest overall in this chart is the 4-inch original iPhone SE.
Using these sizes to test a website
To see your site at an exact iPhone size on a desktop, you need the viewport and the pixel ratio and user agent, not just a narrow window. Two options:
- Chrome DevTools device mode: choose an iPhone preset, or click Edit and add a custom device with the width, height and pixel ratio from the chart. See the Chrome mobile emulator guide.
- A mobile view extension with iPhone presets. Mobile View Extension reloads the tab in an iPhone frame with the matching user agent, screen size and pixel ratio, and accepts custom resolutions if a model is missing.
Both render with Chrome’s engine. For Safari-specific behaviour, use the Xcode Simulator or a real iPhone, covered in how to test a website on iPhone without an iPhone.
Frequently asked questions
What is the viewport size of the iPhone 17?
402 × 874 CSS pixels at a pixel ratio of 3, from a 1206 × 2622 pixel, 6.3-inch display. The iPhone 17 Pro and iPhone 18 Pro share the same values.
What screen size should I design for on iPhone?
Design fluid layouts that work from 375 to 440 px wide. Use 390 or 393 px as a typical mid-size iPhone in mockups, and check 375 and 440 px before release.
Why is the iPhone viewport smaller than its resolution?
Each CSS pixel is drawn with two or three physical pixels per side to keep text sharp. The viewport is the resolution divided by that pixel ratio. More in what is viewport size.