Safari viewport caveats
The table uses stable portrait reference dimensions. On a real iPhone, Safari's address bar, bottom toolbar, scroll state and installed web app mode can change the visible height while the CSS width stays the same.
iPhone Viewport Sizes
CSS viewport dimensions and device pixel ratios for every iPhone and iPad — the reference table for responsive design, media queries and device emulation.
CSS viewport DPR Developer reference
19 devices shown
| CSS viewport | ||||
|---|---|---|---|---|
| iPhone 17 Pro Max | 1320 × 2868 | 440 × 956 | 3 | 2025 |
| iPhone Air | 1260 × 2736 | 420 × 912 | 3 | 2025 |
| iPhone 17 Pro | 1206 × 2622 | 402 × 874 | 3 | 2025 |
| iPhone 17 | 1206 × 2622 | 402 × 874 | 3 | 2025 |
| iPhone 16e | 1170 × 2532 | 390 × 844 | 3 | 2025 |
| iPad Pro 13" (M4) | 2064 × 2752 | 1032 × 1376 | 2 | 2024 |
| iPad Pro 11" (M4) | 1668 × 2420 | 834 × 1210 | 2 | 2024 |
| iPad Air 11" (M2) | 1640 × 2360 | 820 × 1180 | 2 | 2024 |
| iPad mini (A17 Pro) | 1488 × 2266 | 744 × 1133 | 2 | 2024 |
| iPhone 16 Pro Max | 1320 × 2868 | 440 × 956 | 3 | 2024 |
| iPhone 16 Plus | 1290 × 2796 | 430 × 932 | 3 | 2024 |
| iPhone 16 Pro | 1206 × 2622 | 402 × 874 | 3 | 2024 |
| iPhone 16 | 1179 × 2556 | 393 × 852 | 3 | 2024 |
| iPhone 15 Pro Max | 1290 × 2796 | 430 × 932 | 3 | 2023 |
| iPhone 15 Pro | 1179 × 2556 | 393 × 852 | 3 | 2023 |
| iPhone 15 | 1179 × 2556 | 393 × 852 | 3 | 2023 |
| iPad (10th gen) | 1640 × 2360 | 820 × 1180 | 2 | 2022 |
| iPhone 14 | 1170 × 2532 | 390 × 844 | 3 | 2022 |
| iPhone SE (3rd gen) | 750 × 1334 | 375 × 667 | 2 | 2022 |
pending = data pending verification against manufacturer specs. Click column headers to sort.
Insight
Using these values in media queries
Media queries match against CSS viewport dimensions, never physical pixels. A breakpoint of
min-width: 430px
matches the Plus and Pro Max models in portrait but not the standard iPhones. To target high-density displays
use min-resolution: 3dppx —
see the DPR guide for details.
Real-device caveats
Portrait and landscape
Portrait width is the value most teams use for mobile breakpoints. In landscape, width and height swap, but browser UI can reduce the usable height, so test landscape separately for modals, sticky bars and media-heavy pages.
Safe areas and Dynamic Island
Notches, Dynamic Island and the Home indicator do not change the viewport width, but they do affect safe placement for full-bleed UI. Use CSS safe-area environment variables for edge-aligned controls.
Frequently asked questions
› What viewport size should I target for iPhones?
Current iPhones are 393 × 852 (standard), 402 × 874 (Pro), 430 × 932 (Plus/Pro Max) and 440 × 956 (16/17 Pro Max) CSS pixels. If you support one width, 390–393 px covers the most common models; always test at 375 px for the SE.
› Why is the viewport so much smaller than the screen resolution?
iPhones use a device pixel ratio of 3 (SE: 2): every CSS pixel is drawn with 3 × 3 physical pixels. The 1179-pixel-wide iPhone 16 panel therefore reports a 393 CSS-pixel viewport.
› Do these values change in landscape?
Width and height swap, and Safari's UI changes the available height. The values listed are portrait-mode CSS dimensions of the full screen, the convention used in media query references.
› How do I test these sizes?
Browser devtools device emulation uses exactly these CSS dimensions. Or open our viewport checker on a real device to see its live values.
Related tools
- Viewport Size Checker See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Device Pixel Ratio Checker Check your device pixel ratio (DPR) instantly and understand the difference between CSS pixels and physical pixels, with visual examples.
- iPhone Screen Sizes iPhone screen sizes for every current model: display inches, resolution, PPI and aspect ratio in one verified table.
- Common Screen Resolutions Reference list of common screen resolutions and viewport sizes across desktop, laptop, tablet and mobile, with aspect ratios and usage notes.