Native resolution 1080 × 1920 px at 3× · 401 PPI · 5.5″ · 9:16. Design at 414 × 736 and export assets at 3×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 414 × 736 px |
| CSS viewport (landscape) | 736 × 414 px |
| Native resolution | 1080 × 1920 px |
| Device pixel ratio | 3× |
| Pixel density | 401 PPI |
| Screen diagonal | 5.5 in |
| Panel size | 2.69 × 4.79 in |
| Aspect ratio | 9:16 |
| Total pixels | 2.07 MP |
| Released | 2016 |
| Operating system | iOS |
| Safe area (top / bottom) | 20 / 0 px |
Among the 130 phones on this site, the iPhone 7 Plus has the 85th largest CSS viewport area. Its 414 px width is 15 px above the 399 px average for this category.
Targeting the iPhone 7 Plus in CSS
Device-specific media queries are brittle — a new model with the same width will not match. Use them for genuine per-device fixes only, and prefer width buckets for layout.
/* Target iPhone 7 Plus specifically */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 414px) { /* … */ }Safe area on the iPhone 7 Plus
Home button, status bar only. Content placed inside the top 20 px or the bottom 0 px will sit under system UI unless you inset it.
/* iPhone 7 Plus safe area — requires viewport-fit=cover */
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
.app {
padding-top: env(safe-area-inset-top); /* 20px */
padding-bottom: env(safe-area-inset-bottom); /* 0px */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}Compare with other iPhone models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| iPhone 7 Plus | 414 × 736 | 1080 × 1920 | 3× | 401 | 5.5″ |
| iPhone 7 | 375 × 667 | 750 × 1334 | 2× | 326 | 4.7″ |
| iPhone SE (1st gen) | 320 × 568 | 640 × 1136 | 2× | 326 | 4″ |
| iPhone 8 Plus | 414 × 736 | 1080 × 1920 | 3× | 401 | 5.5″ |
| iPhone 6s Plus | 414 × 736 | 1080 × 1920 | 3× | 401 | 5.5″ |
| iPhone X | 375 × 812 | 1125 × 2436 | 3× | 458 | 5.85″ |
| iPhone 8 | 375 × 667 | 750 × 1334 | 2× | 326 | 4.7″ |
| iPhone 6s | 375 × 667 | 750 × 1334 | 2× | 326 | 4.7″ |
| iPhone 6 Plus | 414 × 736 | 1080 × 1920 | 3× | 401 | 5.5″ |
Questions about the iPhone 7 Plus screen
What is the screen size of the iPhone 7 Plus?
The iPhone 7 Plus has a 5.5-inch display. In CSS the viewport measures 414 × 736 px in portrait, and the panel itself has 1080 × 1920 physical pixels at 401 PPI.
What resolution should I design for on the iPhone 7 Plus?
Design at 414 × 736 and export assets at 3×. That gives you 1080 × 1920 px images, which is exactly what the panel renders. Designing directly at 1080 × 1920 means every measurement is 3 times larger than the CSS values you will write.
What is the device pixel ratio of the iPhone 7 Plus?
The iPhone 7 Plus reports a device pixel ratio of 3. One CSS pixel therefore covers 9 device pixels. You can read it in JavaScript with window.devicePixelRatio.
Why does 414 × 3 not equal 1080?
Because the iPhone 7 Plus renders at 1242 × 2208 and then downsamples that frame to the 1080 × 1920 panel. Apple does this on the models where the panel resolution does not divide evenly into a whole scale factor. For your CSS and your asset exports, the 3× figure is the one that matters.
What are the safe area insets on the iPhone 7 Plus?
In portrait the safe area inset is 20 px at the top and 0 px at the bottom (Home button, status bar only). Use env(safe-area-inset-*) rather than hard-coding these — the values change per device and per orientation.
Which other devices have the same viewport as the iPhone 7 Plus?
3 other devices share the 414 × 736 CSS viewport: iPhone 8 Plus, iPhone 6s Plus, iPhone 6 Plus. A layout that works on one works on all of them.
Related
window.innerWidth/innerHeight reported by the stock browser with no browser chrome. See methodology and sources.