iPad Air 11″: viewport, resolução e safe areas

No iPad Air 11″, o viewport é de 820×1180 pixels CSS em retrato (1180×820 deitado), com densidade de pixels (DPR) 2 e resolução física de 1640×2360.

Retrato: 820×1180
Deitado: 1180×820
DPR: 2
Física: 1640×2360

iPad Air 11″ no Breakpane em modo App, com o Lume aberto e as cotas do viewport — Captura do Breakpane em modo App (PWA instalado). As cotas mostram o viewport que a página mediu dentro do aparelho; as barras do sistema que ficam reservadas não entram na conta.

Medidas

Medidas do iPad Air 11″ em pixels CSS
Viewport em retrato	820×1180
Viewport deitado	1180×820
Densidade de pixels (DPR)	2
Resolução física	1640×2360
Barra de status (safe area superior)	24 px
Indicador de início (safe area inferior)	20 px
Safe area inferior, deitado	20 px
Safari: área ocupada em cima	74 px
Viewport visível no Safari, retrato	820×1106
Sistema	iPadOS
Observação	mesma tela do iPad (10ª/11ª geração)

CSS para o iPad Air 11″

Media query pela largura

Ponto de quebra se escreve em pixels CSS, nunca na resolução física.

/* iPad Air 11″: 820 px CSS em retrato, 1180 deitado */
@media (max-width: 820px) {
  /* … */
}

/* telas com DPR 2 ou mais */
@media (min-resolution: 2dppx) {
  /* imagens em 2x */
}

Safe areas com env()

Com viewport-fit=cover, a página vai até a borda e o sistema entrega as safe areas por env(). No app instalado, o topo só vira inset com a barra de status black-translucent; no Safari, as barras do navegador cobrem essas faixas.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

/* iPad Air 11″, retrato: 24 px em cima e 20 px embaixo */
.topo { padding-top: env(safe-area-inset-top); }
.barra-inferior { padding-bottom: env(safe-area-inset-bottom); }

Como o Breakpane simula o iPad Air 11″

O Breakpane não roda iPadOS. É um Chromium com o viewport (820×1180), a densidade (2), o user agent, o toque, as safe areas e o display-mode do iPad Air 11″, dentro de uma moldura com as medidas reais, flutuando na frente do editor com o seu dev server ao vivo.

Serve para layout, safe areas e o PWA instalado. Bugs de renderização ou de API do WebKit só aparecem num aparelho de verdade ou no Simulador do Xcode.

Outros aparelhos: Tablets

Todos os aparelhos

Medidas do catálogo do Breakpane, conferidas em fontes públicas (a lista de aparelhos do Chrome DevTools, useyourloaf.com, deviceatlas.com, yesviz.com, webmobilefirst.com e 1440px.com) entre 2 de out. de 2026 e 5 de out. de 2026.