Os iPhones atuais têm telas de 6,1 a 6,9 polegadas, com viewports CSS de 390 a 440 pixels de largura. O iPhone 18 Pro e o iPhone 17 têm tela de 6,3 polegadas e viewport de 402 × 874; o iPhone 18 Pro Max e o 17 Pro Max, tela de 6,9 polegadas e viewport de 440 × 956; o iPhone 17e, tela de 6,1 polegadas e viewport de 390 × 844. A tabela abaixo lista todos os modelos até o primeiro iPhone SE.
Como ler a tabela
- Tela é a diagonal em polegadas, como a Apple informa. Nos modelos com cantos arredondados, a área visível real é um pouco menor.
- Resolução é a quantidade de pixels físicos da tela, em retrato.
- Viewport CSS é o que uma página web enxerga no Safari em retrato com uma meta tag viewport correta: a resolução dividida pela densidade de pixels. É esse número que vale para design responsivo e media queries.
- Densidade de pixels (DPR) é quantos pixels físicos formam um pixel CSS em cada direção.
Tabela de tamanhos de tela do iPhone (2016–2026)
| Modelo | Ano | Tela | Resolução | Viewport CSS | Densidade de pixels |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6,5” | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6,9” | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6,3” | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6,7” | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6,1” | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (3ª geração) | 2022 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6,7” | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6,1” | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5,4” | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (2ª geração) | 2020 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6,5” | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6,1” | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5,8” | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5,5” | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4,7” | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (1ª geração) | 2016 | 4,0” | 640 × 1136 | 320 × 568 | 2 |
* Os modelos Plus renderizam em 1242 × 2208 e reduzem para o painel de 1080 × 1920, então a densidade informada é 3, enquanto a física é de cerca de 2,6. O iPhone 12 mini e o 13 mini também renderizam um viewport de 375 px num painel um pouco menor do que um 3x exigiria.
Fontes: páginas de especificações técnicas da Apple para cada modelo (tamanho da tela e resolução); os valores de viewport são a resolução dividida pela densidade de pixels. Confira a página de especificações da Apple para os modelos mais novos, já que a Apple lança novos todo ano.
As larguras de viewport de que o web designer realmente precisa
De todos esses modelos, só algumas larguras importam para o layout:
| Largura CSS | Modelos |
|---|---|
| 375 px | SE (2ª e 3ª geração), 8, modelos mini, X/XS/11 Pro |
| 390 px | 12, 13, 14, 16e, 17e |
| 393 px | 14 Pro, 15, 15 Pro, 16 |
| 402 px | 16 Pro, 17, 17 Pro, 18 Pro |
| 414 px | XR, 11, XS Max, 11 Pro Max, 8 Plus |
| 420 px | Air |
| 428–440 px | Modelos Plus e Pro Max |
Se o seu layout funciona de forma fluida de 375 a 440 px, ele funciona em qualquer iPhone vendido nos últimos oito anos. Teste também 320 px se quiser garantir aparelhos antigos e texto ampliado. Para tudo o que fica entre os celulares e acima deles, veja breakpoints responsivos.
Qual iPhone tem a maior e a menor tela?
As maiores telas são as dos Pro Max de 6,9 polegadas: iPhone 16 Pro Max, 17 Pro Max e 18 Pro Max. A menor tela da geração atual tem 6,1 polegadas (iPhone 16e e 17e). O menor iPhone com design moderno de borda a borda foi o iPhone 13 mini, de 5,4 polegadas, e o menor de toda a tabela é o primeiro iPhone SE, de 4 polegadas.
Como usar esses tamanhos para testar um site
Para ver o seu site no tamanho exato de um iPhone no computador, você precisa do viewport e da densidade de pixels e do user agent, não só de uma janela estreita. Duas opções:
- O modo dispositivo do Chrome DevTools: escolha um preset de iPhone ou clique em Edit e adicione um aparelho personalizado com a largura, a altura e a densidade de pixels da tabela. Veja o guia do emulador mobile do Chrome.
- Uma extensão de visualização mobile com presets de iPhone. O Mobile View Extension recarrega a aba numa moldura de iPhone com o user agent, o tamanho de tela e a densidade de pixels correspondentes, e aceita resoluções personalizadas se faltar algum modelo.
As duas renderizam com o motor do Chrome. Para o comportamento específico do Safari, use o Simulador do Xcode ou um iPhone de verdade, como explicado em como testar um site no iPhone sem ter um iPhone.
Perguntas frequentes
Qual é o tamanho do viewport do iPhone 17?
402 × 874 pixels CSS com densidade 3, numa tela de 6,3 polegadas com 1206 × 2622 pixels. O iPhone 17 Pro e o iPhone 18 Pro têm os mesmos valores.
Para qual tamanho de tela devo desenhar no iPhone?
Faça layouts fluidos que funcionem de 375 a 440 px de largura. Use 390 ou 393 px como um iPhone médio nos mockups e confira 375 e 440 px antes do lançamento.
Por que o viewport do iPhone é menor que a resolução?
Cada pixel CSS é desenhado com dois ou três pixels físicos por lado para manter o texto nítido. O viewport é a resolução dividida por essa densidade. Mais em o que é viewport.