iPhone Viewport Sizes from iPhone SE to iPhone 16 Pro Max
Complete reference of iPhone CSS viewport sizes from iPhone SE through iPhone 16 Pro Max. Includes width, height, and device pixel ratio for every model.
Detailed Explanation
iPhone Viewport Size Evolution
Apple's iPhone lineup spans a wide range of CSS viewport sizes. Understanding these dimensions is essential for any web developer targeting iOS users, who represent a significant share of mobile web traffic.
Key iPhone Viewport Widths
| Generation | CSS Width | CSS Height | DPR |
|---|---|---|---|
| iPhone SE (1st gen) | 320px | 568px | 2x |
| iPhone 6/7/8 | 375px | 667px | 2x |
| iPhone X/XS/11 Pro | 375px | 812px | 3x |
| iPhone 12/13 | 390px | 844px | 3x |
| iPhone 14 Pro | 393px | 852px | 3x |
| iPhone 15 | 393px | 852px | 3x |
| iPhone 16 Pro Max | 440px | 956px | 3x |
Common Width Clusters
iPhone CSS viewports cluster around a few key widths: 320px (legacy), 375px (widely used), 390-393px (current standard), and 428-440px (Pro Max models). When designing mobile breakpoints, targeting 375px as a baseline covers the majority of iPhones in active use.
DPR Considerations
All modern iPhones use a DPR of 3, meaning each CSS pixel is rendered with a 3x3 grid of physical pixels. This means a 393px-wide viewport has a physical resolution of 1179 pixels. Images and icons should be provided at 2x and 3x resolutions for crisp rendering across all models.
Safe Area Insets
Since iPhone X introduced the notch (and later the Dynamic Island), developers must account for safe area insets. The CSS env(safe-area-inset-top) and env(safe-area-inset-bottom) variables help ensure content is not obscured by hardware features.
Use Case
A front-end developer building a mobile-first e-commerce site needs to verify that product cards, navigation menus, and checkout forms render correctly across all iPhone models from SE to 16 Pro Max.
Try It — Viewport Size Reference
Related Topics
Android Device Viewport Sizes for Samsung, Pixel, and More
Mobile Viewports
iPad Viewport Sizes from iPad Mini to iPad Pro 13"
Tablet Viewports
Responsive Design Testing: Essential Viewport Sizes to Test
Responsive Design
Mobile-First Breakpoint Strategy for Responsive Design
Mobile Viewports
Tailwind CSS Breakpoints: Default Values and Device Mapping
Framework Breakpoints