confusão de resolução do iPhone 6 Plus: Xcode ou site da Apple? para desenvolvimento


265

O site da Apple afirma que a resolução é 1080p: 1920 x 1080

No entanto, a tela de lançamento exigida pelo Xcode (8.0 GM lançada hoje) é 2208 x 1242.

Quem está certo?

Xcode


As imagens de inicialização do iPhone 6+ devem ser 1242x2208 e 2208x1242. Pelo menos isso faz com que os aplicativos funcionem corretamente no simulador (e isso está documentado no HIG). Não descobri por que isso é diferente do suposto tamanho físico da tela de 1920x1080.
rmaddy

2
discrepância muito estranha.
JasonGenX


Isso pode mudar na versão estável do Xcode 6.1. É isso?
Jayprakash Dubey

3
Para atualizar o link de Andreas, consulte o "Ultimate Guide to iPhone Resolutions" paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
David James

Respostas:


308

O iPhone 6+ é renderizado internamente usando recursos @ 3x em uma resolução virtual de 2208 × 1242 (com 736x414 pontos) e, em seguida, mostra isso para exibição. O mesmo que usar uma resolução em escala em um MacBook Retina - permite que eles atinjam um múltiplo integral para recursos de pixel, enquanto ainda têm, por exemplo, texto de 12 pt com a mesma aparência na tela.

Então, sim, as telas de lançamento precisam ter esse tamanho.

As matemáticas:

O 6, o 5s, o 5, o 4s e o 4 são todos 326 pixels por polegada e usam recursos @ 2x para manter os aproximadamente 160 pontos por polegada de todos os dispositivos anteriores.

O 6+ é de 401 pixels por polegada. Por isso, hipoteticamente seria necessário aproximadamente @ 2,46x ativos. Em vez disso, a Apple usa recursos @ 3x e reduz a produção completa para cerca de 84% do seu tamanho natural.

Na prática, a Apple decidiu ir com mais de 87%, transformando o 1080 em 1242. Sem dúvida, foi encontrar algo o mais próximo possível de 84% que ainda produzia tamanhos integrais nas duas direções - 1242/1080 = 2208/1920 exatamente , enquanto que se você transformasse o 1080 em, digamos, 1286, seria necessário renderizar 2286,22 pixels verticalmente para dimensionar bem.


6
Como você calculou-> "resolução virtual de 2208 × 1242 (com 736x414 pontos)" e isso "precisa de aproximadamente @ 2,46x ativos" O que o UIScreen mainScreen] .bounds.size.height retornará para 6+? 568, 568 * 3 (1704) ou 1920.
msk

1
Talvez adicione uma observação a esta resposta sobre imagens de lançamento? (ver a resposta das Hannes) útil ter em mente para apps existentes que estão sendo atualizado (caso contrário, ele é executado em 320x576 @ 3x - Eu estava confuso por um tempo!)
Joseph Humfrey

2
O @msk [UIScreen mainScreen].bounds.size.heightretorna 736 no simulador do iPhone 6+ quando em modo retrato. Este é o valor 2208 dividida pela escala de 3. A largura é 414.
rmaddy

1
Não é exatamente do mesmo tamanho com @ 3x com a resolução 1242 * 2208, é 6% esticado.
Binarian 10/09/14

4
Que grito horrível! Uma perda de desempenho, memória e nitidez em todo o sistema, apenas para tornar alguns ajustes de tamanho no nível da API um pouco mais simples! Bem, eu acho que tudo vai fazer sentido quando eles liberam o iPhone 7 Plus com um 461 exibição ppi 5.5" .
sup

114

A resposta é que aplicativos mais antigos são executados no modo de zoom 2208 x 1242. Mas quando um aplicativo é criado para os novos telefones, as resoluções disponíveis são: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi) , Retina HD 5.5 ( iPhone 6, 7, 8 Plus ) 1242 x 2208 e Retina HD 4.7 ( iPhone 6 ) 750 x 1334 . Isso está causando a confusão mencionada na pergunta. Para criar aplicativos que usam o tamanho de tela inteira dos novos telefones, adicione o LaunchImages nos tamanhos: 1125 x 2436, 1242 x 2208, 2208 x 1242 e 750 x 1334.

Atualizado para os novos iPhones 11, 11 Pro, 11 Pro Max

Tamanho para iPhone 11 Pro Max com escala @ 3x , espaço de coordenadas: 414 x 896 pontos e 1242 x 2688 pixels, 458 ppi, o tamanho físico do dispositivo é 3,06 x 6,22 pol ou 77,8 x 158,0 mm. Tela Super Retina XDR de 6,5 ".

Tamanho do iPhone 11 Pro com escala 3x , espaço de coordenadas: 375 x 812 pontos e 1125 x 2436 pixels, 458 ppi, o tamanho físico do dispositivo é 2,81 x 5,67 pol ou 71,4 x 144,0 mm. Tela Super Retina XDR de 5,8 ".

O tamanho do iPhone 11 com escala 2x , espaço de coordenadas: 414 x 896 pontos e 828 x 1792 pixels, 326 ppi, o tamanho físico do dispositivo é de 2,98 x 5,94 ou 75,7 x 150,9 mm. Tela Retina HD de 6,1 "líquida.

Tamanho para iPhone X🅂 Max com escala @ 3x (nome da Apple: tela Super Retina HD 6.5 " ), espaço de coordenadas: 414 x 896 pontos e 1242 x 2688 pixels, 458 ppi, o tamanho físico do dispositivo é 3,05 x 6,20 ou 77,4 x 157,5 milímetros.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 Max Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 1242.0, 2688.0), scale: 3.0

Tamanho para iPhone X🅁 com escala @ 2x (nome da Apple: tela Super Retina HD de 6,1 " ), espaço de coordenadas: 414 x 896 pontos e 828 x 1792 pixels, 326 ppi, o tamanho físico do dispositivo é 2,98 x 5,94 ou 75,7 x 150,9 mm .

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅁 Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 828.0, 1792.0), scale: 2.0

Tamanho para iPhone X🅂 e iPhone X com escala @ 3x (nome da Apple: tela Super Retina HD 5,8 " ), espaço de coordenadas: 375 x 812 pontos e 1125 x 2436 pixels, 458 ppi, o tamanho físico do dispositivo é 2,79 x 5,65 ou 70,9 x 143,6 mm.

let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 and X Screen bounds: (0.0, 0.0, 375.0, 812.0), Screen resolution: (0.0, 0.0, 1125.0, 2436.0), scale: 3.0

insira a descrição da imagem aqui

Tamanho para iPhone 6, 6S, 7 e 8 com escala @ 3x (nome da Apple: Retina HD 5.5 ), espaço de coordenadas: 414 x 736 pontos e 1242 x 2208 pixels, 401 ppi, o tamanho físico da tela é de 2,7 x 4,8 pol ou 68 x 122 mm . Ao executar no Modo Zoom, ou seja, sem a nova LaunchImages ou a opção Configuração no iPhone 6 Plus, a escala nativa é de 2,88 e a tela tem 320 x 568 pontos, que é o tamanho nativo do iPhone 5:

Screen bounds: {{0, 0}, {414, 736}}, Screen resolution: <UIScreen: 0x7f97fad330b0; bounds = {{0, 0}, {414, 736}};
mode = <UIScreenMode: 0x7f97fae1ce00; size = 1242.000000 x 2208.000000>>, scale: 3.000000, nativeScale: 3.000000

Tamanho para iPhone 6 e iPhone 6S com escala @ 2x (nome da Apple: Retina HD 4.7 ), espaço de coordenadas: 375 x 667 pontos e 750 x 1334 pixels, 326 ppi, o tamanho físico da tela é de 2,3 x 4,1 ou 58 x 104 mm . Ao executar no Modo Zoom, ou seja, sem o novo LaunchImages, a tela tem 320 x 568 pontos, que é o tamanho nativo do iPhone 5:

Screen bounds: {{0, 0}, {375, 667}}, Screen resolution: <UIScreen: 0x7fa01b5182d0; bounds = {{0, 0}, {375, 667}};
mode = <UIScreenMode: 0x7fa01b711760; size = 750.000000 x 1334.000000>>, scale: 2.000000, nativeScale: 2.000000

E o iPhone 5 para comparação é 640 x 1136, iPhone 4 640 x 960.


Aqui está o código que eu usei para verificar isso (observe que nativeScale é executado apenas no iOS 8):

UIScreen *mainScreen = [UIScreen mainScreen];
NSLog(@"Screen bounds: %@, Screen resolution: %@, scale: %f, nativeScale: %f",
          NSStringFromCGRect(mainScreen.bounds), mainScreen.coordinateSpace, mainScreen.scale, mainScreen.nativeScale);

Nota: Carregue o LaunchImages, caso contrário, o aplicativo será executado no Modo de Zoom e não mostrará a escala ou os tamanhos de tela corretos. No Modo Zoom, o nativeScalee scalenão será o mesmo. Em um dispositivo real, a escala pode ser 2,608 no iPhone 6 Plus, mesmo quando não está sendo executado no Modo Zoom, mas mostrará uma escala de 3,0 quando estiver sendo executado no simulador.

Comparando iPhone 6 e 6 Plus


3
Eu acho que você não adicionou as novas versões da imagem de lançamento. É provavelmente por isso que o aplicativo é executado no "modo de compatibilidade" e os limites da tela são os antigos 320x576 em ambos os dispositivos.
precisa saber é o seguinte

3
Assim que você adiciona os novos tamanhos de imagem de inicialização, você obtém os tamanhos de limite de tela (lógicos) corretos: 375x667 para o iPhone 6 e 414x736 para o 6+.
precisa saber é o seguinte

1
@DanielRinser Obrigado por isso. Eu vou experimentar.
Sverrisson

@DanielRinser, obrigado por sua contribuição nas imagens de inicialização. Atualizei a resposta com base na sua entrada.
Sverrisson

e quanto aos ativos para o iPhone 4? Como eles devem ser nomeados e como colocá-los no catálogo de ativos, se não houver espaço para eles? O catálogo de ativos possui três slots para imagens do iPhone: 1x, 2x e 3x. Se 2x e 3x são para os recursos do iPhone 6 e 6+, colocamos os recursos do iPhone 4 em 1x? Acho que não.
Duck

96

A resolução real / física do iPhone 6 Plus é de 1920x1080, mas no Xcode você cria sua interface com resolução de 2208x1242 (736x414 pontos) e no dispositivo é automaticamente reduzida para 1920x1080 pixels.

Referência rápida das resoluções do iPhone:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

resoluções do iPhone


3
Resposta bonita e simples. Obrigado Leszek.
SJ Lim

46

Você provavelmente deve parar de usar imagens de inicialização no iOS 8 e usar um storyboard ou nib / xib.

  • No Xcode 6 , abra o Filemenu e escolha NewFile...iOSUser InterfaceLaunch Screen.

  • Em seguida, abra as configurações do seu projeto clicando nele.

  • No Generalguia, na seção chamada App Icons and Launch Images, defina a Launch Screen Fileaos arquivos que você acabou de criar (isto irá definir UILaunchStoryboardNameem info.plist).

Observe que, por enquanto, o simulador mostrará apenas uma tela preta; portanto, você precisa testar em um dispositivo real .

Adicionando um arquivo xib da Tela de Lançamento ao seu projeto:

Incluindo um novo arquivo xib da Tela de Ativação

Configurando seu projeto para usar o arquivo xib da Tela de Ativação em vez do Catálogo de Ativos:

Configurar o projeto para usar o Launch Screen xob


1
Instruções quase perfeitas, mas deve ser Arquivo -> NOVO -> Arquivo ... etc Demorou um pouco para encontrar o segundo arquivo :) Obrigado pela ajuda!
Will

Como você faz isso parecer bom? Quando tento colocar uma imagem, ela fica muito instável.
badweasel

Se você não está apenas exibindo uma imagem e deseja mostrar a interface do usuário para carregamento, é uma boa idéia, pois a imagem ainda precisa estar nos tamanhos apropriados, independentemente de estar ou não em um storyboard. Da mesma forma, se você puder desenhar a imagem no código, poderá contornar o que suponho.
AppHandwerker 15/09/14

Você ainda precisará fornecer arquivos de imagem se estiver suportando algo anterior ao iOS 8, pois os xibs de inicialização não são compatíveis com versões anteriores.
Mark Bridges

24

No dispositivo físico, os limites da tela principal do iPhone 6 Plus são 2208x1242 e os limites nativos são 1920x1080 . Há dimensionamento de hardware envolvido para redimensionar para a exibição física.

No simulador, os limites da tela principal do iPhone 6 Plus e os limites nativos são 2208x1242.

Em outras palavras, os vídeos, o OpenGL e outras coisas baseadas nessesCALayers pixels lidam com o buffer de quadro real de 1920x1080 no dispositivo (ou 2208x1242 no sim). As coisas que lidam com pontos UIKitserão tratadas com os limites de 2208x1242 (x3) e serão dimensionadas conforme apropriado no dispositivo.

O simulador não tem acesso ao mesmo hardware que está realizando a escala no dispositivo e não há realmente um grande benefício em simulá-lo no software, pois eles produziriam resultados diferentes do hardware. Portanto, faz sentido definir a nativeBoundstela principal de um dispositivo simulado para os limites da tela principal de um dispositivo físico.

O iOS 8 adicionou a API a UIScreen( nativeScalee nativeBounds) para permitir que um desenvolvedor determine a resolução do CADisplaycorrespondente ao UIScreen.


13

Para quem gosta de saber como os aplicativos herdados são tratados, fiz alguns testes e cálculos sobre o assunto.

Graças à dica @ hannes-sverrisson, comecei com a suposição de que um aplicativo herdado é tratado com uma visualização de 320x568 no iPhone 6 e iPhone 6 plus.

O teste foi realizado com um fundo preto simples bg@2x.pngcom uma borda branca. O plano de fundo tem um tamanho de 640x1136 pixels e é preto com uma borda branca interna de 1 pixel.

Abaixo estão as capturas de tela fornecidas pelo simulador:

Na captura de tela do iPhone 6, podemos ver uma margem de 1 pixel na parte superior e inferior da borda branca e uma margem de 2 pixels na captura de tela do iPhone 6 plus. Isso nos dá um espaço usado de 1242x2204 no iPhone 6 plus, em vez de 1242x2208 e 750x1332 no iPhone 6, em vez de 750x1334.

Podemos assumir que esses pixels mortos devem respeitar a proporção do iPhone 5:

iPhone 5               640 / 1136 = 0.5634
iPhone 6 (used)        750 / 1332 = 0.5631
iPhone 6 (real)        750 / 1334 = 0.5622
iPhone 6 plus (used)  1242 / 2204 = 0.5635
iPhone 6 plus (real)  1242 / 2208 = 0.5625

Segundo, é importante saber que os recursos @ 2x serão redimensionados não apenas no iPhone 6 plus (que espera recursos @ 3x), mas também no iPhone 6. Isso provavelmente ocorre porque o não dimensionamento dos recursos levaria a layouts inesperados, devido a para a ampliação da vista.

No entanto, essa escala não é equivalente em largura e altura. Eu tentei com um recurso 264x264 @ 2x. Dados os resultados, devo assumir que a escala é diretamente proporcional à proporção de pixels / pontos.

Device         Width scale             Computed width   Screenshot width
iPhone 5        640 /  640 = 1.0                        264 px
iPhone 6        750 /  640 = 1.171875  309.375          309 px
iPhone 6 plus  1242 /  640 = 1.940625  512.325          512 px

Device         Height scale            Computed height  Screenshot height
iPhone 5       1136 / 1136 = 1.0                        264 px
iPhone 6       1332 / 1136 = 1.172535  309.549          310 px
iPhone 6 plus  2204 / 1136 = 1.940141  512.197          512 px

É importante observar que a escala do iPhone 6 não é a mesma em largura e altura (309x310). Isso tende a confirmar a teoria acima de que a escala não é proporcional em largura e altura, mas usa a proporção de pixels / pontos.

Eu espero que isso ajude.


12

Confira este infográfico: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Explica as diferenças entre os antigos iPhones, iPhone 6 e iPhone 6 Plus. Você pode ver a comparação dos tamanhos de tela em pontos, pixels renderizados e pixels físicos. Você também encontrará respostas para sua pergunta aqui:

iPhone 6 Plus - com tela Retina HD. O fator de escala é 3 e a imagem é posteriormente reduzida de 2208 × 1242 pixels para 1920 × 1080 pixels.

A taxa de redução de escala é 1920/2208 = 1080/1242 = 20 / 23. Isso significa que todos os 23 pixels da renderização original devem ser mapeados para 20 pixels físicos. Em outras palavras, a imagem é reduzida para aproximadamente 87% do seu tamanho original.

Atualizar:

Existe uma versão atualizada do infográfico mencionada acima. Ele contém informações mais detalhadas sobre as diferenças de resolução de tela e abrange todos os modelos de iPhone até o momento, incluindo dispositivos de 4 polegadas.

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


Assim, mesmo com o anti-aliasing desativado, existe um anti-aliasing não opcional que ocorre no downscaling?
Sam

Se esse infográfico incluísse tela de 4 polegadas, teria sido incrível.
Rajesh

@ Rajesh Atualizei minha resposta, verifique agora para obter informações sobre dispositivos de 4 polegadas.
Darrarski

4

Mesmo que eu geralmente não goste do tom do blog Daring Fireball de John Gruber, sua Conjectura de exibição maior para iPhone vale a pena ler.

Ele adivinhou, mas acertou exatamente a resolução em pontos e em pixels para ambos os modelos, exceto que ele não esperava que a Apple construísse uma tela física de resolução menor e reduzisse a escala (os detalhes estão na resposta de @ Tommy).

A essência de tudo isso é que é preciso parar de pensar em termos de pixels e começar a pensar em termos de pontos (esse é o caso há algum tempo, não é uma invenção recente) e o tamanho físico resultante dos elementos da interface do usuário. Em resumo, os dois novos modelos de iPhone melhoram nesse aspecto, já que a maioria dos elementos permanece do mesmo tamanho, basta caber mais na tela (para cada tela maior, mais).

Estou um pouco decepcionado por eles não terem mantido o mapeamento da resolução interna para a resolução de tela real 1: 1 para o modelo maior.


pensamos em pontos, mas infelizmente temos que criar imagens em pixels no Photoshop ... 😃
Duck

2
Os pixels são importantes para muitos de nós por vários motivos. Enquanto a Apple faz seu próprio pensamento de policiamento neste tópico, eles adicionaram relutantemente [UIScreen nativeBounds] no iOS8 por muito boas razões.
Ctpenrose

Sim, os pixels também são importantes, mas para recursos estáticos, como imagens (telas de abertura e outras). Meu argumento (trocadilhos) foi mais para o layout da tela do aplicativo, coisas desenhadas dinamicamente.
rawpower
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.