Como adicionar iPhone7, Samsung S8 ou qualquer outro device ao Chrome DevTools

Hoje em dia, enquanto estamos a desenvolver um web site, é quase impensável não utilizar o Google Chrome. Goste-se ou não, o facto é que ele se tornou o standard global, e deve sempre ser utilizado como a principal referência para o web developer profissional.

Para os que ainda têm algumas dúvidas sobre o assunto, basta olhar para a "quota de mercado" do browser da Google entre Junho de 2016 e Junho de 2017... Em Maio de 2017 já seguia acima dos 53%. É assim impossível contornar a sua utilização, nem que seja para ter a certeza que tudo aparece bem.

Além do seu enorme volume de utilizadores, o Chrome é extremamente aliciante aos web developers devido às ferramentas incorporadas, que hoje em dia se tornaram incrivelmente sofisticadas e essenciais para o desenvolvimento moderno - o Chrome Dev Tools. Ao alcance de uma tecla, este grupo de ferramentas permite-nos navegar pelas entranhas do código html, css e javascript a correr em tempo real no nosso website ou webapp. Não só aceleram o desenvolvimento (adoro testar o css em tempo real - basta depois copiar o código para o ficheiro), como são fulcrais para o debugging de erros e suas origens.

Uma dessas ferramentas é a responsive device toolbar, que nos ajuda a visualizar o responsive design do layout e estilos css aplicado a aparelhos de diferentes formatos e dimensões. A sua aplicação é imensamente importante para o web developer moderno. De uma forma prática, podemos observar e estilizar o css e perceber a sua adaptação ao target device, efectuar correcções em tempo real e salvar o resultado actualizado. De notar que continua a não substituir um teste real no aparelho em questão, pois às vezes surgem pequenas nuances de renderização e fluidez, mas que para mais de 90% do tempo será suficiente.

Ter os dados certos

Apesar do responsive device toolbar trazer um simpático conjunto de devices que podemos utilizar como ponto de partida (vou ser franco, podem utilizar o iPhone 6 em substituição do iPhone 7, serve perfeitamente), vamos aprender como inserir novos perfis de aparelhos como o iPhone 7 e 7 Plus da Apple, ou o Samsung S8 e S8+, pois são smartphones importantes a ter em conta quando desenvolvemos a versão mobile. A criação dos perfis é muito simples e eficaz - menos simples é encontrar os dados corretos a introduzir.

Um dos meus projetos recentes tinha, como requisito, uma atenção especial para a apresentação em iPhone 7, 7 Plus e Samsung S8 - um óptima oportunidade para a criação do device profile.  No entanto, é necessário algum cuidado - as minhas primeiras pesquisas devolveram resultados incorrectos ou apenas as dimensões físicas do ecrã, e não é isso que necessitamos. Fiquei surpreendido em encontrar pouco consenso sobre este assunto.

Felizmente, os bons rapazes da mydevice.io fizeram um ótimo trabalho, listando os principais aparelhos com os dados corretos - quase todos os que procuro. Outro sitio com bons dados https://material.io/devices/.

Saber o que procurar: pixels reais vs. pixels css

As dimensão que necessitamos para a construção do perfil são a largura e altura CSS em pixels. Não confundam com a largura e altura da resolução do ecrã, também em pixels. Os smartphones atuais têm uma elevada resolução real (portanto, uma elevada quantidade física de pixels melhorando assim a qualidade de textos, imagens e videos ). Nem todos os aparelhos têm a mesma quantidade de pixels, e alguns têm muito mais pixels que o esperado - e isto trouxe um problema.

Imaginemos um ecrã com 320px reais de largura (como os telemóveis de 2007-2008). Se a nossa página tiver no css uma instrução 'width: 320px;', o elemento controlado por essa instrução medirá 320 pixels de largura, toda a largura do dispositivo. Vamos agora ver a mesma página num Samsung S8 - tem 1440px reais de largura. A página não iria cobrir sequer 22% da largura do dispositivo! O mesmo se passaria com qualquer marca ou modelo. A solução? Pixels CSS.

Cada fabricante designa um rácio de densidade de pixels (em inglês 'device/pixel ratio'), e que é utilizado para compatibilidade de interpretação com as dimensões de ecrãs de densidade comum. Isto é: 1 pixel css é equivalente a 1 pixel num ecrã de computador (equivalente, não igual).

Se apenas tivermos as dimensões físicas e o rácio, podemos calculá-las facilmente: divide-se a dimensão (largura ou altura) do ecrã pelo número do rácio. Vamos utilizar um iPhone 7 como exemplo: sabemos que tem 750 pixels físicos de largura e que usa um rácio de 2, então:

750px (largura do ecrã) / 2 (rácio de densidade) = 375px (largura CSS)

Para a altura a operação é exactamente igual. Simples :)
1334px (altura do ecrã) / 2 (rácio de densidade) = 667px (altura CSS)


Agora que sabe sobre o rácio de pixels, tome nota do seguinte: alguns fabricantes incorporam outras alterações na conversão (como por exemplo oversampling ou downsampling por 1.15%), como é o caso da Apple nas versões Plus - o que destrói estes cálculos. Pode saber mais no "Ultimate Guide to iPhone Resolutions".

Assim, e para poupar trabalho, aqui fica uma tabela com os valores em questão para os smartphones mais procurados:

Telemóvel	Largura real	Altura real	Rácio Device/pixel	Largura CSS	Altura CSS
iPhone 7	750px	1334px	2	375px	667px
iPhone 7 Plus	1080px	1920px	3	414px	736px
Samsung Galaxy S7/Edge	1440px	2560px	4	360px	640px
Samsung Galaxy S8, S8+	1440px	2960px	4	360px	740px

Finalmente prontos

Ok, munidos da informação certa, podemos seguir para criar os profiles!

1. Abra uma webpage no Google Chrome e arranque o Chrome DevTools (F12 para Windows, Cmd + Opt + I para Mac).
   
2. Clique no botão do 'Device Toolbar' ou use o atalho (Ctrl + Shift + M).
   
   
   
3. Clique no selector de caixa (1) e escolha "Edit". Depois, clique em "Add custom device" (2).
   
   
   
   
4. Vamos adicionar o iPhone 7. Preencha os detalhes com os dados da tabela - a largura css, altura css e o rácio de pixels. Grave e feche. A partir de agora pode seleccionar o novo perfil facilmente e ajustar o seu estilo css para o smartphone em questão.
   
   
   

Pode continuar a adicionar tamanhos e aparelhos específicos, mas não precisa de parar nos smartphones - tablets e monitores com tamanhos diferentes podem ser adicionados da mesma forma.

Também as SmartTVs, que já começam a ser utilizados para alguma visualização web, podem ser adicionadas, pois têm normalmente tamanhos fora do vulgar.

Nota: 

Um ponto importante a salientar é que estes aparelhos também se podem identificar via linhas de texto 'User Agent'. Apesar de não ser uma prática recomendada, certas vezes é a única maneira de lidar com features especiais ou bugs únicos. O Chrome DevTools permite-nos adicionar um 'User Agent string' opcional, que pode ajudar numa melhor emulação ao testar funções avançadas ou melhor deteção de versões especificas de browsers através de Javascript, PHP ou outras libraries.

Sendo opcional, os 'User Agent' strings não são necessárias para a criação dos perfis de ecrã.

Esta é uma tradução do meu artigo em inglês Adding iPhone 7, Samsung S8 and any other device to Chrome DevTools.

Espero que tenha sido útil e não tenham problemas em comentar.


Até à próxima!