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.
Data status: Last updated: 2026-02-08 (UTC)
Sources: Official Apple, Google, and Samsung specification pages
Method: iPhone and iPad values are mainly resolution divided by DPR. Android CSS viewport and DPR can vary by display scaling, browser UI, and system settings.
Viewport Sizes Table
| Model | Viewport Size | Screen Resolution | DPR | Release Year |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
Understanding Viewport Sizes
Viewport Basics
When designing for devices, it's important to understand the difference between viewport sizes and screen resolutions:
- 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
Technical Implementation
- Implement proper viewport meta tags
- Use CSS media queries effectively
- Consider safe area insets
- Optimize for different DPR values
Frequently Asked Questions About Device Viewports
Viewport size is the CSS pixel area your layout uses, while screen resolution is the device's physical pixel count. They are related by DPR, but browser UI and scaling can change the effective viewport.
Different DPR values, system display scaling, and browser behavior can produce different CSS viewport widths even when physical resolutions are close.
Use this table as a reference for common real devices, then define flexible breakpoints by content behavior, not single models. Test key ranges like 360, 390, 412, 768, 820, 834, and 1024 CSS pixels.
Foldables can switch between cover and main displays with very different viewport ratios. Test both states and rotation, and avoid hard-coding layouts to one exact width.
We update this data after major device launches and specification changes. Always verify critical production cases on real devices or cloud test labs.