viewport vs resolução de tela
screen.width e screen.height descrevem o monitor inteiro, mas nenhum media query CSS lê esses valores para decidir breakpoint: quem manda no layout responsivo é window.innerWidth, a viewport real onde a página é desenhada depois de descontar barras do navegador. Essa página isola os dois números para você parar de confundir resolução física com área útil.
Só quando a janela ocupa a tela inteira o innerWidth se aproxima do screen.width, e ainda assim descontando qualquer barra de tarefas fixa do sistema operacional.
Abrir o painel do DevTools ancorado lateralmente reduz a viewport disponível para a página exatamente na largura do painel, disparando breakpoints menores mesmo sem redimensionar a janela do navegador.
Split view do sistema operacional é a causa mais comum de um usuário ver o layout mobile de um site num monitor grande, porque a viewport reportada é bem menor que a resolução física do monitor.
Viewport é a área visível da página no navegador, medida em CSS pixels. Ela muda ao redimensionar a janela, abrir barras laterais, alterar zoom ou girar o dispositivo.
Porque a media query está reagindo à largura real da viewport (window.innerWidth), não à resolução do monitor: se a janela do navegador ocupa só metade da tela, num split view ou lado a lado com outro app, a viewport pode ficar abaixo do breakpoint mobile mesmo o monitor sendo 4K.
Não: window.innerWidth já desconta a largura da barra de rolagem vertical quando ela está visível, então o valor reflete a área realmente disponível para o conteúdo da página, diferente de outerWidth, que mede a janela inteira do navegador incluindo toda a moldura.
É: screen.availWidth desconta áreas reservadas pelo sistema operacional, como a barra de tarefas do Windows ou o dock do macOS, enquanto screen.width reporta a resolução bruta do painel; nenhum dos dois, porém, reflete o tamanho da janela do navegador em si.
Só quando o objetivo é conhecer a capacidade do monitor físico, como escolher a resolução máxima de um vídeo para oferecer ao usuário; para decisões de layout, espaçamento e breakpoint, window.innerWidth é sempre a medida correta porque reflete o espaço real disponível para o conteúdo.
As medidas são lidas localmente pelas APIs do navegador e não identificam sua tela de forma única.