Ferramenta de info da tela online e gratuita. Confira resolução, DPI, proporção e profundidade de cor do seu monitor. No navegador.
Pressione Ctrl+D para adicionar esta página aos favoritos
A ferramenta de resolução de tela exibe resolução, tamanho do viewport, DPR e profundidade de cor do dispositivo.
DPR é o número de pixels físicos por pixel CSS. DPR 2 indica display Retina, imagens devem ter 2x o tamanho para exibição nítida.
Resolução de tela é o total de pixels físicos do monitor, enquanto viewport é a área onde o conteúdo é exibido no navegador, excluindo barras de ferramentas.
Prender breakpoints a nomes de aparelhos específicos garante que eles quebrem assim que um novo modelo chegar. Corte, em vez disso, onde o próprio layout começa a ficar errado. Na prática 480, 768, 1024 e 1280 px são pontos de partida comuns, mas são números fáceis de lembrar, não regras. Estreite a janela do navegador devagar e repare em que largura as linhas de texto ficam longas demais ou um cartão se achata: colocar ali o breakpoint dura muito mais.
Porque um pixel CSS é uma unidade de tamanho aparente, não um ponto físico. Numa tela 4K com escala em 200%, 3840 pontos físicos são apresentados como 1920 pixels CSS, e é justamente isso que deixa texto e ícones mais densos e nítidos. A razão de pixels do dispositivo passa a ser 2, então, para manter as imagens nítidas, é preciso fornecer via srcset um arquivo com o dobro do tamanho exibido.