Qual tamanho de tela de iPhone é ideal para desenvolvedores e designers
O mercado tem várias gerações de iPhone rodando ao mesmo tempo, e tentar acertar o tamanho da tela certo sem considerar toda essa variação é a razão principal pela qual layouts quebram em produção. Eu passei anos ajustando interfaces e aprendi na prática que o que importa não é só a diagonal, mas a densidade de pixels, a relação de aspect e a safe area que cada modelo impõe.
Entendendo tamanho tela iphone na prática
A Apple não usa apenas polegadas para definir o tamanho da tela. O que realmente determina como seu conteúdo aparece é o resolução em pontos de escala (pt), não em pixels brutos. Um iPhone 14 Pro Max tem tela de 6,7 polegadas, mas no código você trabalha com 430 por 932 pontos na orientação retrato. Isso é o tamanho tela iphone que importa para layout, não a medida física que aparece na caixa do produto. Veja a tabela de referência dos modelos mais comuns:
iPhone SE (2ª e 3ª g): 4,7 polegadas. Resolução de pontos: 375 por 667. Safe area inferior: 34 pontos. É a tela mais simples porque não tem notch e o canto é mais arredondado, o que na prática reduz cerca de 2 pontos de área útil em cada canto se você não usar os constraints corretos no Auto Layout. iPhone 12 e 13 (modelos normais): 6,1 polegadas. Resolução de pontos: 390 por 844. Safe area inferior: 34 pontos. Tem notch e Dynamic Island não existe ainda aqui. Essa geração foi a primeira a padronizar a proporção 19,5 por 9, que quebrou muitos layouts antigos baseados apenas em 16 por 9.
iPhone 14 Pro Max e 15 Pro Max: 6,7 polegadas. Resolução de pontos: 430 por 932. Safe area inferior: 34 pontos. O maior screen real estate disponível atualmente, mas isso também significa que os usuários esperam que conteúdo extra apareça nos lados. Se seu design simplesmente centraliza tudo como fazia no iPhone 8, parece esguio e deslocado nessa tela. iPhone 16 Pro Max: 6,9 polegadas. Resolução de pontos: 440 por 956. Safe area inferior: 34 pontos. A Apple aumentou a largura máxima depois de anos usando 430 como teto. Quem mantém kits de design fixos em 430 de largura vai notar que o conteúdo não preenche totalmente a tela nesses dispositivos.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Aqui vai um problema real que eu enfrentei recentemente: estava atualizando um app para suportar o iPhone 16 Pro Max e usei o construtor de layouts visuais do Xcode normalmente, sem prestar atenção na largura máxima do frame. O resultado foi que em alguns devices o conteúdo ficava centrado com uma faixa cinza nas laterais, porque o frame do view controller tinha largura fixa em 430pt ao invés de usar constraints de leading e trailing atreladas ao superview. A solução foi remover qualquer restrição de largura explícita e garantir que todos os elementos tivessem constraints de ancoragem lateral ativas. Levei cerca de 40 minutos para corrigir isso em todo o fluxo principal, o que poderia ter sido evitado com um review de layout em múltiplos dispositivos desde o início.
Como calcular e testar tamanho tela iphone corretamente
O primeiro passo é abrir o Size Inspector no Xcode e verificar se cada view tem constraints de trailing e leading, não largura fixa. A diferença entre um layout responsivo e um que quebra em telas maiores é quase sempre essa restrição ausente. Eu uso o device simulator da Apple com os três modelos principais: um SE para testar a menor tela, um 15 regular para o padrão do mercado e um Pro Max para validar o espaço extra. Se você está desenvolvendo para web, a abordagem é diferente mas igualmente sensível. O CSS media queries deve mirar em larguras de viewport, não em dispositivos específicos. Recomendo os breakpoints de 375, 390, 414 e 430 pontos como referência, porque cobrem praticamente todas as variantes atuais. O Safari no iPhone também aplica um zoom de 980 pixels por padrão em páginas que não têm a meta viewport correta, o que distorce completamente o tamanho da tela percebido pelo layout.
Aqui está um insight que poucas pessoas levam em conta: a safe area não é apenas sobre o notch. Nos modelos com Dynamic Island, a área segura inferior também é afetada pela barra de gestos do iOS. Se você posicionar um botão fixo a 20 pontos da borda inferior usando margin convencional, ele vai ficar embaixo da barra de gestos em 99% dos casos. O correto é usar o inset inferior da safe area, que no iPhone moderno é 34 pontos na maioria dos models, exceto no SE que é 0 porque não tem gestos de Home. Outro detalhe prático: a densidade de pixels varia entre dispositivos. O iPhone 12 Pro tem 460 PPI enquanto o iPhone 15 Plus tem 458 PPI. A diferença é mínima, mas se você está exportando assets de imagem, usar escalas 1x, 2x e 3x conforme o padrão da Apple resolve a maioria dos problemas de nitidez sem precisar adivinhar qual resolução usar. Assets em 3x são obrigatórios para os modelos Pro Max, caso contrário a imagem aparece borrada em comparação com o resto da interface.
Se o seu objetivo é apenas consultar o tamanho da tela rapidamente para fins de documentação ou escolha de dispositivo, você pode acessar as especificações oficiais diretamente no site da Apple. Para desenvolvedores, o mais útil é usar o simulador do Xcode com o scheme configurado para alternar entre dispositivos automaticamente a cada build, o que reduz o tempo de teste de layout de cerca de duas horas para aproximadamente 25 minutos por iteração. O único cenário em que essa abordagem tradicional de múltiplos breakpoints falha de forma significativa é quando o app usa layouts extremamente complexos com tabelas dinâmicas ou gráficos interativos que dependem de cálculos de dimensão em tempo real. Nesses casos, recomendo testar diretamente em hardware físico porque o simulador às vezes não reproduz exatamente o comportamento de renderização do Metal em telas de alta taxa de atualização de 120Hz. Isso é especialmente relevante para o iPhone 14 Pro em diante, que introduziu o ProMotion e mudou a forma como o sistema gerencia o refresh rate em diferentes tamanhos de tela.
