Simulador de área segura do iPhone e gerador CSS

Consulte margens seguras do iPhone na vertical e horizontal. Compare botões sobrepostos e copie código CSS ou Tailwind.

Executado no navegador · Sem cadastro

Dispositivo

Orientação

Mostrar regiões

Diagrama ilustrativo; câmera e cantos não são contornos exatos.

Margens de referência pt

Superior: 0
Direita: 84
Inferior: 34
Esquerda: 0

Tela lógica: 466 × 678 pt
Dimensões seguras: 382 × 644 pt
Resolução nativa: 1398 × 2034 px
Escala de renderização: 3×

Sobre estes valores

Dados atualizados 2026-09-26

Espaçamento do conteúdo16 px

As dimensões lógicas e margens do iPhone Duo usam referências do simulador iOS 27.1; a horizontal gira para a esquerda. A tela interna mantém a barra de status. Blocos escuros indicam áreas reservadas. O layout de 669 × 951 pt e a resolução física oficial de 1878 × 2670 px são valores distintos, sem conversão direta de 3×. São exibidos os estados totalmente aberto e fechado, sem medições em aparelho real.

Código adaptável

Usa valores env() reais, não números fixos do aparelho. O espaçamento altera o código; o botão de alternância compara a demonstração. Há espaço reservado para a barra fixa e o botão de 44px. Teste conteúdo mais alto, Safari e PWA no projeto.

<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 deste navegador

Lendo valores do navegador…

Valores CSS px deste navegador, independentes do perfil escolhido. Zero pode estar correto em desktop ou viewport retangular. Os valores podem mudar ao girar ou redimensionar. Não identifica o aparelho nem emula o Safari.

Tabela de áreas seguras do iPhone

Valores verticais em pontos lógicos (pt), com zoom padrão e barra de status visível. As dimensões seguras descontam as duas margens correspondentes do tamanho lógico da tela. Teste também em dispositivos reais.

Tabela de áreas seguras do iPhone — Vertical
Dispositivo	Tela lógica	Superior (pt)	Inferior (pt)	Direita (pt)	Dimensões seguras
iPhone Duo · Tela externa · Fechado	466 × 678	0	34	84	382 × 644
iPhone Duo · Tela interna · Aberto	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

Como usar

Escolha o dispositivo e a orientação para consultar os valores.
Na demonstração, alterne as margens e ajuste o espaçamento.
Copie CSS ou Tailwind e teste no navegador e dispositivo desejados.

Exemplo

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

Detalhes e limitações

CSS px, pontos nativos e pixels físicos são unidades diferentes. O iPhone 13 mini renderiza em 3× e reduz para a resolução nativa.

Sistema, zoom, barras e layout podem alterar os valores. A ilustração não é um modelo exato de design.

FAQ

Por que o navegador mostra 0px?

Um viewport retangular pode não precisar de margens. Selecionar um iPhone não muda o ambiente real do navegador.

Posso fixar 34px embaixo?

Use env(safe-area-inset-bottom, 0px) com seu espaçamento para adaptar o layout a outras orientações e dispositivos.

Página da ferramenta atualizada: 2026-09-26