iPhone 17 Pro Max: viewport, resolução e safe areas
No iPhone 17 Pro Max, o viewport é de 440×956 pixels CSS em retrato (956×440 deitado), com densidade de pixels (DPR) 3 e resolução física de 1320×2868.
- Retrato
- 440×956
- Deitado
- 956×440
- DPR
- 3
- Física
- 1320×2868
Medidas
| Viewport em retrato | 440×956 |
|---|---|
| Viewport deitado | 956×440 |
| Densidade de pixels (DPR) | 3 |
| Resolução física | 1320×2868 |
| Barra de status (safe area superior) | 62 px |
| Indicador de início (safe area inferior) | 34 px |
| Safe areas laterais, deitado | 62 px |
| Safe area inferior, deitado | 21 px |
| Safari: área ocupada em cima | 62 px |
| Safari: área ocupada embaixo | 94 px |
| Viewport visível no Safari, retrato | 440×800 |
| Sistema | iOS |
| Observação | mesma tela do iPhone 18 Pro Max |
CSS para o iPhone 17 Pro Max
Media query pela largura
Ponto de quebra se escreve em pixels CSS, nunca na resolução física.
/* iPhone 17 Pro Max: 440 px CSS em retrato, 956 deitado */
@media (max-width: 440px) {
/* … */
}
/* telas com DPR 3 ou mais */
@media (min-resolution: 3dppx) {
/* imagens em 3x */
}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">
/* iPhone 17 Pro Max, retrato: 62 px em cima e 34 px embaixo */
.topo { padding-top: env(safe-area-inset-top); }
.barra-inferior { padding-bottom: env(safe-area-inset-bottom); }
/* deitado: 62 px nas laterais e 21 px embaixo */
.pagina {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}Como o Breakpane simula o iPhone 17 Pro Max
O Breakpane não roda iOS. É um Chromium com o viewport (440×956), a densidade (3), o user agent, o toque, as safe areas e o display-mode do iPhone 17 Pro Max, 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: iPhone
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.