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 the current and recent iPhone models tracked here — a reference for responsive design, media queries and device emulation.
Tracked iPhonesCSS viewportDPR reference
16 display configurations shown
| CSS viewport | ||||
|---|---|---|---|---|
| iPhone 18 Pro Max | 1320 × 2868 | 440 × 956 | 3 | 2026 |
| iPhone 18 Pro | 1206 × 2622 | 402 × 874 | 3 | 2026 |
| 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 |
| 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 |
| iPhone 14 | 1170 × 2532 | 390 × 844 | 3 | 2022 |
| iPhone SE (3rd gen) | 750 × 1334 | 375 × 667 | 2 | 2022 |
Click column headers to sort.
Insight
Using these values in media queries
Media queries match against CSS viewport dimensions, never physical pixels. The current tracked generation spans440, 402px portrait width groups. Use those values as regression references around your own content-driven breakpoints. To target high-density assets, use resolution queries such asmin-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?
The 2026 models currently tracked use these portrait references: 440 × 956, 402 × 874 CSS pixels. Across all tracked models, test the relevant width groups (375, 390, 393, 402, 420, 430, 440 px) instead of choosing a single iPhone width.
›Why is the viewport so much smaller than the screen resolution?
iPhone 18 Pro pairs a 1206-pixel-wide panel with a 402-CSS-pixel reference at DPR 3. The table shows that DPR varies across tracked generations.
›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 CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Device Pixel Ratio CheckerCheck your device pixel ratio (DPR) instantly and understand the difference between CSS pixels and physical pixels, with visual examples.
- iPhone Screen SizesCompare screen size, resolution, PPI and aspect ratio for the current and recent iPhone models tracked in the ScreenSize.net database.
- Tablet Screen SizesCompare sourced tablet display sizes, resolutions, CSS viewports, DPR and PPI, and learn which dimensions matter for responsive tablet layouts.
- Common Screen ResolutionsReference list of common screen resolutions and viewport sizes across desktop, laptop, tablet and mobile, with aspect ratios and usage notes.