Apple iPhone 8 Plus : viewport CSS de 414 × 736 px, resolución y prueba responsive

¿Por qué probar su sitio en Apple iPhone 8 Plus?

Resolución del viewport CSS Apple iPhone 8 Plus

Es la resolución que más interesa a los diseñadores y desarrolladores, ya que condiciona los breakpoints y la definición de las media queries. En la práctica, es la única de la que se habla en una hoja de estilo.

La altura sigue siendo indicativa: Safari, Chrome y otros navegadores móviles reducen el área visible con su barra de direcciones, que se repliega al desplazarse.

Atención al analizar tus estadísticas: algunas herramientas solo informan la resolución del fabricante, nunca el viewport CSS presentado aquí.

Densidad de píxel Apple iPhone 8 Plus

El device pixel ratio Apple iPhone 8 Plus es de 3. En otras palabras, un cuadrado de 1 píxel en CSS ocupa 3 píxeles en la pantalla. Una imagen exportada en tamaño real se verá borrosa.

Resolución del fabricante Apple iPhone 8 Plus

Esta resolución es la del hardware. Explica la nitidez de la visualización, pero nunca es la que se debe apuntar en una media query.

• 1080 píxeles de ancho
• 1920 píxeles de alto
• 401 píxeles por pulgada (ppi)
• 5,5 pulgadas de diagonal, es decir, 14 cm
• Relación de pantalla de 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 y fragmentos de código para Apple iPhone 8 Plus

Estos fragmentos se generan a partir de las características exactas Apple iPhone 8 Plus. Cópielos directamente en su hoja de estilo o configuración.

@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) {
  /* Imágenes e íconos de alta densidad */
}

// 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">

Simulador Apple iPhone 8 Plus gratuito

Mobile FIRST aún no integra Apple iPhone 8 Plus, pero un modelo con formato idéntico está incluido. Por lo tanto, ya puede validar sus breakpoints y su densidad de visualización.

Es aquí donde se nota la diferencia con el modo responsive de Chrome DevTools: DevTools redimensiona una ventana, la extensión reproduce el navegador del dispositivo y permite exportar capturas y videos compartibles.

1. 01 Instalar la extensión — Agrega Mobile FIRST a Chrome, Firefox o Edge. La instalación es gratuita y no requiere cuenta.
2. 02 Abrir la página a probar — Ve a la URL a verificar, incluyendo una dirección local del tipo localhost:3000.
3. 03 Elegir Apple iPhone 8 Plus — Seleccione Apple iPhone 8 Plus en la lista de dispositivos. El viewport cambia a 414 x 736 píxeles y se aplica el User-Agent móvil.
4. 04 Verificar el renderizado — Desplázate, cambia de orientación, prueba tus formularios, luego captura una imagen o un video para compartirlo.

Modelos que comparten el formato Apple iPhone 8 Plus

Estos 2 dispositivos comparten exactamente el viewport de 414 x 736 píxeles y la densidad de 3x Apple iPhone 8 Plus. Su renderizado CSS es, por lo tanto, rigurosamente el mismo: lo que valida en uno es válido en todos los demás.

• Apple iPhone 6s Plus
• Apple iPhone 7 Plus

Comparativo con modelos cercanos

Los formatos vecinos Apple iPhone 8 Plus son los que deben probarse justo después, ya que son ellos los que revelan los breakpoints mal colocados.

Preguntas frecuentes sobre Apple iPhone 8 Plus

Actualizado el 15 de agosto de 2026