Simulador de áreas seguras de iPhone y generador CSS

Consulta los márgenes seguros de iPhone en vertical y horizontal. Compara botones superpuestos y copia código CSS o Tailwind.

Funciona en tu navegador · Sin registro

Dispositivo

Orientación

Mostrar regiones

Esquema: la cámara y las esquinas no representan la forma exacta.

Márgenes de referencia pt

Superior: 0
Derecho: 84
Inferior: 34
Izquierdo: 0

Pantalla lógica: 466 × 678 pt
Dimensiones seguras: 382 × 644 pt
Resolución nativa: 1398 × 2034 px
Escala de renderizado: 3×

Acerca de estos valores

Datos actualizados 2026-09-26

Espaciado del contenido16 px

Los tamaños lógicos y márgenes del iPhone Duo son referencias del simulador iOS 27.1; la orientación horizontal gira a la izquierda. La pantalla interior mantiene la barra de estado. Los bloques oscuros son regiones reservadas. Su diseño de 669 × 951 pt y la resolución física oficial de 1878 × 2670 px son valores distintos, no una conversión directa de 3×. Se muestran los estados totalmente abierto y cerrado, no mediciones de un dispositivo real.

Código adaptable

Usa valores env() reales, no cifras fijas del dispositivo. El espaciado modifica el código; el interruptor solo compara la demo. Se reserva espacio para la barra fija y el botón de 44px. Comprueba contenidos más altos, Safari y PWA en tu proyecto.

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

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

Área segura de este navegador

Leyendo valores del navegador…

Valores CSS px de este navegador, independientes del dispositivo elegido. Cero puede ser correcto en escritorio o un viewport rectangular. Pueden variar al girar o redimensionar. No identifica tu dispositivo ni emula Safari.

Tabla de áreas seguras de iPhone

Valores verticales en puntos lógicos (pt), con zoom estándar y barra de estado visible. El tamaño seguro resta los márgenes de ambos lados al tamaño lógico de pantalla. Verifica también en dispositivos reales.

Tabla de áreas seguras de iPhone — Vertical
Dispositivo	Pantalla lógica	Superior (pt)	Inferior (pt)	Derecho (pt)	Dimensiones seguras
iPhone Duo · Exterior · Cerrado	466 × 678	0	34	84	382 × 644
iPhone Duo · Interior · Abierto	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

Cómo usarla

Elige dispositivo y orientación para consultar sus dimensiones.
Abre la demostración, activa los márgenes y ajusta el espaciado.
Copia CSS o Tailwind y compruébalo en el navegador y dispositivo de destino.

Ejemplo

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

Detalles y limitaciones

CSS px, puntos nativos y píxeles físicos son unidades distintas. iPhone 13 mini renderiza a 3× y reduce a la resolución nativa.

El sistema, el zoom, las barras y el diseño pueden cambiar los valores. El esquema no es una plantilla de diseño exacta.

FAQ

¿Por qué aparece 0px?

Un viewport rectangular puede no tener zonas que evitar. Elegir un iPhone no cambia el entorno real del navegador.

¿Puedo fijar 34px abajo?

Usa env(safe-area-inset-bottom, 0px) junto con tu espaciado para adaptarte a otras orientaciones y dispositivos.

Página de la herramienta actualizada: 2026-09-26