53 dispositivos · Smartphones, tablets, computadores e relógios conectados
Dispositivos Apple: viewport CSS, densidade e resolução de tela
As características de exibição dos 53 dispositivos Apple referenciados, com a largura na qual suas media queries ressoam, sua densidade de pixel e a resolução de sua tela. 43 desses dispositivos podem ser testados diretamente no seu navegador.
Smartphones Apple
13 larguras CSS distintas cobrem toda a gama: 320, 360, 375, 390, 393, 402, 414, 420, 428, 430, 440, 466 e 890 px. Vários modelos compartilham a mesma: validar um deles é suficiente para validar os outros.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Apple iPhone 18 PRO | 402 × 873 | 3x | 1206 × 2619 | 6,3" | 2026 |
| Apple iPhone 18 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,9" | 2026 |
| Apple iPhone Duo dobrado | 466 × 678 | 3x | 1398 × 2034 | 5,4" | 2026 |
| Apple iPhone Duo desdobrado | 890 × 626 | 3x | 2670 × 1878 | 7,6" | 2026 |
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6,3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6,5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6,7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6,1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6,7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6,1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6,7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5,4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5,4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6,1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6,7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5,8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6,1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6,5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5,5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4,7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Computadores Apple
A largura fornecida é a da janela do navegador na escala padrão do sistema, e não a resolução da tela: é esse primeiro valor que suas media queries veem.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16,2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9,3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13,3" | 2020 |
Tablets Apple
Os valores são dados em retrato. Em paisagem, largura e altura se invertem: Apple iPad Mini (6th Gen) passa de 768 x 1024 para 1024 x 768 pixels CSS. Seus breakpoints de tablet devem cobrir ambos.
| Modelo | Viewport CSS (retrato) | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7,9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9,7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
Relógios conectados Apple
O navegador desses relógios exibe apenas uma coluna: a largura é a única medida que conta, e é mais estreita do que a de todos os telefones do parque.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1,6" | 2020 |
Quais larguras testar em prioridade
As larguras mais representadas da gama são 320, 375, 390 e 414 px. Verificá-las primeiro cobre 25 dos 53 modelos Apple referenciados, e é sobre elas que seus primeiros breakpoints devem incidir.
Desça até 162 px para cobrir toda a gama, incluindo Apple Watch Series 6 (40mm): um layout que se adapta a essa largura se adapta em qualquer lugar. No lado do tablet, também considere os valores em paisagem, onde largura e altura se invertem.
Atenção à altura: os navegadores móveis reduzem a área visível com suas barras de interface, e estas se retraem ao rolar. Uma altura de 100vh, portanto, transborda da primeira tela; as unidades svh e dvh são preferíveis.
Teste seu site em 43 dispositivos Apple, sem comprar nenhum
As tabelas fornecem as medidas. A extensão exibe seu site no viewport exato do modelo, com sua densidade, seu User-Agent e a alternância entre retrato e paisagem.
- 43 dispositivos Apple prontos para uso, desde modelos antigos até os lançamentos do ano
- Capturas e vídeos exportados no formato do dispositivo
- Funciona nos seus ambientes locais e suas pré-produções
Grátis · 4,9/5 em 5.100 avaliações
1.500.000+ usuários
Outras marcas
Perguntas frequentes
Qual é o viewport CSS mais comum na Apple?
375 x 812 px, compartilhado por 8 dos 53 modelos referenciados, incluindo Apple iPhone 13 Mini e Apple iPhone SE. É a largura a verificar primeiro nesta gama.
Qual largura mínima testar para cobrir os dispositivos Apple?
162 px, a largura do modelo mais estreito da lista, Apple Watch Series 6 (40mm). Se o seu layout cabe em 162 px, ele cabe nos 53 dispositivos Apple referenciados, até o mais largo que atinge 2048 px.
Por que a resolução anunciada pela Apple não corresponde ao viewport CSS?
Porque essas telas exibem vários pixels físicos por pixel CSS. Apple iPhone 18 PRO tem uma tela de 1206 x 2619 pixels e um viewport CSS de 402 x 873 px, com uma densidade de 3. É o segundo valor que deve ser escrito em uma media query.
Os tablets Apple têm o mesmo viewport em retrato e paisagem?
Os valores são invertidos: Apple iPad Mini (6th Gen) exibe 768 x 1024 px em retrato e 1024 x 768 px em paisagem. As tabelas fornecem os valores em retrato, e o simulador permite alternar de uma orientação para outra.
Como testar seu site em um dispositivo Apple sem ter um?
Com a extensão Mobile FIRST: ela reproduz o viewport, a densidade de pixel, o User-Agent e os eventos táteis de 43 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.
As marcas e modelos citados pertencem aos seus respectivos proprietários.