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