iPhone Viewport Sizes: Complete Guide
This comprehensive guide provides detailed viewport sizes and screen resolutions for all iPhone models. Essential information for web developers and designers working on responsive websites and applications.
Viewport Sizes Table
| Model | Viewport Size | Screen Resolution | DPR | Release Year |
|---|---|---|---|---|
| iPhone 16 Pro Max | 440 × 956 | 1320 × 2868 | 3.0 | 2024 |
| iPhone 16 Pro | 402 × 874 | 1206 × 2622 | 3.0 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3.0 | 2024 |
| iPhone 16 | 393 × 852 | 1179 × 2556 | 3.0 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3.0 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3.0 | 2023 |
| iPhone 15 Plus | 430 × 932 | 1290 × 2796 | 3.0 | 2023 |
| iPhone 15 | 393 × 852 | 1179 × 2556 | 3.0 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3.0 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3.0 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3.0 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3.0 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3.0 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3.0 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3.0 | 2021 |
| iPhone 13 mini | 375 × 812 | 1125 × 2436 | 3.0 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3.0 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3.0 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3.0 | 2020 |
| iPhone 12 mini | 375 × 812 | 1125 × 2436 | 3.0 | 2020 |
| iPhone SE (3rd gen) | 375 × 667 | 750 × 1334 | 2.0 | 2022 |
| iPhone 11 Pro Max | 414 × 896 | 1242 × 2688 | 3.0 | 2019 |
| iPhone 11 Pro | 375 × 812 | 1125 × 2436 | 3.0 | 2019 |
| iPhone 11 | 414 × 896 | 828 × 1792 | 2.0 | 2019 |
| iPhone XS Max | 414 × 896 | 1242 × 2688 | 3.0 | 2018 |
| iPhone XS | 375 × 812 | 1125 × 2436 | 3.0 | 2018 |
| iPhone XR | 414 × 896 | 828 × 1792 | 2.0 | 2018 |
| iPhone X | 375 × 812 | 1125 × 2436 | 3.0 | 2017 |
| iPhone 8 Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2017 |
| iPhone 8 | 375 × 667 | 750 × 1334 | 2.0 | 2017 |
| iPhone 7 Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2016 |
| iPhone 7 | 375 × 667 | 750 × 1334 | 2.0 | 2016 |
| iPhone SE (1st gen) | 320 × 568 | 640 × 1136 | 2.0 | 2016 |
| iPhone 6s Plus | 414 × 736 | 1080 × 1920 | 2.6 | 2015 |
| iPhone 6s | 375 × 667 | 750 × 1334 | 2.0 | 2015 |
Understanding Viewport Sizes
Viewport Basics
- Viewport Size: The visible area in CSS pixels that your website can use
- Screen Resolution: The actual number of physical pixels on the device
- Device Pixel Ratio (DPR): The ratio between physical pixels and CSS pixels
Design Considerations
- Consider different screen sizes and densities
- Consider various aspect ratios
- Optimize for different orientations
- Test on multiple devices
- Consider foldable and dual-screen devices