Verificador de resolução da tela
O viewport do seu navegador é atualizado ao vivo enquanto você redimensiona a janela, além da resolução da tela, da densidade de pixels, da orientação e da profundidade de cor.
Viewport e resolução da tela não são a mesma coisa
A resolução da sua tela é o tamanho total do monitor (por exemplo 1920×1080), enquanto o viewport é só a área em que o navegador realmente desenha a página: ele não inclui a barra de endereços, as abas nem as barras do sistema, e diminui sempre que a janela não está em tela cheia. Ao criar um site responsivo, as media queries do CSS olham para o viewport, não para a tela, e é por isso que esta página o mostra ao vivo enquanto você redimensiona a janela. É o número que decide se os seus visitantes veem o layout de desktop ou o de celular.
O que significa a densidade de pixels (device pixel ratio)?
Em telas de alta densidade (telas Retina, a maioria dos celulares modernos), cada pixel CSS é desenhado usando vários pixels físicos: uma densidade de 2 significa 4 pixels reais para cada pixel lógico. Por isso um celular com um painel de 1170×2532 pode informar um viewport de apenas 390 pixels de largura. O valor importa muito se você prepara imagens para a web: para ficar nítida em uma tela com densidade 2, uma imagem exibida com 300 pixels CSS de largura deve ter pelo menos 600 pixels reais de largura.