Apple iPhone 8 Plus: CSS viewport of 414 × 736 px, resolution and responsive test

Why test your site on Apple iPhone 8 Plus?

CSS viewport resolution of Apple iPhone 8 Plus

This is the resolution that interests designers and developers the most, as it determines breakpoints and the definition of media queries. In practice, it's the only one mentioned in a stylesheet.

The height remains indicative: Safari, Chrome, and other mobile browsers reduce the visible area with their address bar, which folds on scroll.

Be cautious when analyzing your statistics: some tools only report the manufacturer resolution, never the CSS viewport presented here.

Pixel density of Apple iPhone 8 Plus

The device pixel ratio of Apple iPhone 8 Plus is 3. In other words, a 1-pixel square in CSS occupies 3 pixels on the panel. An image exported at actual size will appear blurry.

Manufacturer resolution of Apple iPhone 8 Plus

This resolution is the hardware's. It explains the display's sharpness, but it's never the one to target in a media query.

• 1080 pixels in width
• 1920 pixels in height
• 401 pixels per inch (ppi)
• 5.5 inches diagonal, or 14 cm
• Screen ratio of 16:9

Le panneau est en 1080x1920 mais iOS rend en 1242x2208 avant sous-échantillonnage matériel : l'écart avec viewport x densité est normal.

Media queries and code snippets for Apple iPhone 8 Plus

These snippets are generated from the exact characteristics of Apple iPhone 8 Plus. Copy them directly into your stylesheet or configuration.

@media only screen and (min-width: 414px) and (max-width: 735px) {
  /* Apple iPhone 8 Plus */
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-resolution: 288dpi) {
  /* High-density images and icons */
}

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'apple-iphone-8-plus': '414px'
    }
  }
}

const isDeviceWidth = window.matchMedia('(min-width: 414px)').matches;
const isHighDensity = window.devicePixelRatio >= 3;

<meta name="viewport" content="width=device-width, initial-scale=1">

Free Apple iPhone 8 Plus simulator

Mobile FIRST does not yet include Apple iPhone 8 Plus, but a model with the same format is available. You can already validate your breakpoints and display density.

This is where the difference with Chrome DevTools' responsive mode is seen: DevTools resizes a window, the extension replicates the device's browser and allows exporting shareable screenshots and videos.

1. 01 Install the extension — Add Mobile FIRST to Chrome, Firefox, or Edge. Installation is free and requires no account.
2. 02 Open the page to test — Go to the URL to check, including a local address like localhost:3000.
3. 03 Choose Apple iPhone 8 Plus — Select Apple iPhone 8 Plus from the list of devices. The viewport switches to 414 x 736 pixels, and the mobile User-Agent is applied.
4. 04 Check rendering — Scroll, change orientation, test your forms, then capture an image or video to share.

Models sharing the format of Apple iPhone 8 Plus

These 2 devices share exactly the viewport of 414 x 736 pixels and the 3x density of Apple iPhone 8 Plus. Their CSS rendering is therefore exactly the same: what you validate on one is valid on all others.

• Apple iPhone 6s Plus
• Apple iPhone 7 Plus

Comparison with similar models

The neighboring formats of Apple iPhone 8 Plus are the ones to test right after, as they reveal poorly placed breakpoints.

Frequently asked questions about Apple iPhone 8 Plus

Updated on August 15, 2026