Estou montando algumas capturas de tela para um aplicativo para iOS que criei. Devido ao meu Macbook ser muito lento para executar o simulador de forma eficaz, eu gostaria de criar as imagens no meu navegador usando algo como o Dev Tools do Chrome.
Diretrizes da Apple declaro que preciso enviar tamanhos muito específicos. Por exemplo, a tela de 3,5 "precisa de uma captura de tela que seja:
640 x 920 pixels for hi-res portrait (without status bar) minimum
Então, eu vou para as ferramentas de desenvolvedor do Chrome e ativo a emulação do tamanho da tela. Eu escolho "iPhone 4" da lista. A visualização corresponde ao que eu vejo no meu iPhone 4 real, então eu pego uma captura de tela, mas o arquivo resultante é metade do tamanho necessário (320 x 460).
Por isso, configurei o dispositivo para "responsivo" e digite 640x920, mas agora a visualização não corresponde ao meu iPhone real, devido a consultas de mídia em andamento.
Posso forçar o Chrome (ou Firefox, ou qualquer navegador) a exibir o conteúdo como 640x960, enquanto uso os estilos de consulta de mídia de 320x460?
Eu tentei isso no Firefox e descobri que, se eu definir meu tamanho, defino meu zoom em 200%, ele corresponde ao meu iPhone 4 real, mas quando tiro uma captura de tela, as dimensões voltam para 320 x 480. Mesmo quando eu dobro o tamanho (1280x1920) e defino o zoom para 400%, ele volta novamente 320x460
Consegui resolver isso usando o Firefox 47.0. Há um segundo botão "captura de tela" que você pode ativar no menu de configurações das ferramentas do desenvolvedor.
Esse botão (em oposição ao botão de captura de tela "Responsive Mode") respeita as configurações de zoom, configurando a viewport para 640 x 920 e, em seguida, ampliando para 200%. correspondia perfeitamente ao tamanho recomendado pela Apple.
Para telas de 5,5 ", eu precisava definir o zoom para 400%, mas é sobre isso.
Tags browser developer-tools