Tamanhos de viewport do iPhone: pixels CSS, DPR e resolução
Encontre largura e altura CSS, DPR, resolução física e ano de cada iPhone, incluindo iPhone 17, 16, 15, SE, Pro e Pro Max. Use a tabela para breakpoints, QA responsivo e testes por dispositivo.
Status dos dados: Última atualização: 2026-02-08 (UTC)
Fontes: Páginas oficiais de especificações da Apple, Google e Samsung
Método: Os valores de iPhone e iPad são principalmente resolução dividida pelo DPR. O viewport CSS e DPR do Android podem variar conforme a escala de exibição, interface do navegador e configurações do sistema.
Resposta rápida: Comece pelos iPhones mais recentes no topo da tabela e compare viewport CSS, DPR, resolução física e ano antes de definir breakpoints responsivos.
Tabela de Tamanhos de Viewport
| Modelo | Tamanho do Viewport | Resolução da Tela | DPR | Ano de Lançamento |
|---|---|---|---|---|
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 17 Air | 420 × 912 | 1260 × 2736 | 3 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3 | 2025 |
| iPhone 16 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2024 |
| iPhone 16 Pro | 393 × 852 | 1179 × 2556 | 3 | 2024 |
| iPhone 16 Plus | 428 × 926 | 1284 × 2778 | 3 | 2024 |
| iPhone 16 | 390 × 844 | 1170 × 2532 | 3 | 2024 |
| iPhone 15 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2023 |
| iPhone 15 Pro | 393 × 852 | 1179 × 2556 | 3 | 2023 |
| iPhone 15 Plus | 428 × 926 | 1284 × 2778 | 3 | 2023 |
| iPhone 15 | 390 × 844 | 1170 × 2532 | 3 | 2023 |
| iPhone 14 Pro Max | 430 × 932 | 1290 × 2796 | 3 | 2022 |
| iPhone 14 Pro | 393 × 852 | 1179 × 2556 | 3 | 2022 |
| iPhone 14 Plus | 428 × 926 | 1284 × 2778 | 3 | 2022 |
| iPhone 14 | 390 × 844 | 1170 × 2532 | 3 | 2022 |
| iPhone SE (3rd generation) | 375 × 667 | 750 × 1334 | 2 | 2022 |
| iPhone 13 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2021 |
| iPhone 13 Pro | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 | 390 × 844 | 1170 × 2532 | 3 | 2021 |
| iPhone 13 mini | 375 × 812 | 1080 × 2340 | 3 | 2021 |
| iPhone 12 Pro Max | 428 × 926 | 1284 × 2778 | 3 | 2020 |
| iPhone 12 Pro | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 | 390 × 844 | 1170 × 2532 | 3 | 2020 |
| iPhone 12 mini | 375 × 812 | 1080 × 2340 | 3 | 2020 |
Entendendo Tamanhos de Viewport
Conceitos Básicos de Viewport
Ao projetar para dispositivos, é importante entender a diferença entre tamanhos de viewport e resoluções de tela:
- Tamanho do Viewport: A área visível em pixels CSS que seu site pode utilizar
- Resolução da Tela: O número real de pixels físicos no dispositivo
- Proporção de Pixels do Dispositivo (DPR): A razão entre pixels físicos e pixels CSS
Considerações de Design
- Considere diferentes tamanhos de tela e densidades
- Considere diversas proporções de tela
- Otimize para diferentes orientações
- Teste em múltiplos dispositivos
- Considere dispositivos dobráveis e de tela dupla
Implementação Técnica
- Implemente meta tags de viewport adequadas
- Use media queries CSS de forma eficaz
- Considere safe area insets
- Otimize para diferentes valores de DPR
Perguntas Frequentes Sobre Viewports de Dispositivos
O tamanho do viewport é a área em pixels CSS que seu layout utiliza, enquanto a resolução de tela é a contagem de pixels físicos do dispositivo. Eles são relacionados pelo DPR, mas a interface do navegador e a escala podem alterar o viewport efetivo.
Diferentes valores de DPR, escala de exibição do sistema e comportamento do navegador podem produzir larguras de viewport CSS diferentes mesmo quando as resoluções físicas são próximas.
Use esta tabela como referência para dispositivos reais comuns, depois defina breakpoints flexíveis pelo comportamento do conteúdo, não por modelos específicos. Teste faixas-chave como 360, 390, 412, 768, 820, 834 e 1024 pixels CSS.
Dobráveis podem alternar entre tela externa e principal com proporções de viewport muito diferentes. Teste ambos os estados e rotação, e evite codificar layouts fixos para uma largura exata.
Atualizamos estes dados após lançamentos importantes de dispositivos e mudanças de especificações. Sempre verifique casos críticos de produção em dispositivos reais ou laboratórios de teste na nuvem.