CriarWeb.com > Manuais > Workshop de Javascript

Com Javascript se pode calcular a resolução de tela do usuário que nos visita. Atenção, não nos referimos ao tamanho da janela do navegador, e sim ao tamanho total em pixels que tivermos configurado em nosso sistema.

As resoluções de tela podem ser valores como 800x600, 1024x760, 1280x800… e se configuram pelo usuário no painel de controle, em propriedades de tela.

Nós com Javascript podemos acessar a esses valores através do objeto screen:

Com screen.width obtemos a largura em pixels da definição de tela.
Com screen.height obtemos a altura em pixels.

Então, se quisermos escrever na página os valores de largura e altura da resolução de tela, poderíamos utilizar um javascript como este:

A resolução atual de sua tela é:

<script language="JavaScript">
document.writeln(screen.width + " x " + screen.height)
</script>

Se desejarmos, podemos fazer diferentes coisas dependendo da definição de tela do usuário, por exemplo, com uma estrutura if:

Consideramos sua tela:

<script language="JavaScript">
if (screen.width<1024)
   document.write ("Pequena")
else
   if (screen.width<1280)
      document.write ("Media")
   else
      document.write ("Grande")
</script>

Este código mostrará o tamanho da janela como pequena (menos de 1024 pixels de largura), media (Maior ou igual a 1024 pixels de largura e menor de 1280) ou grande (1280 pixels de largura ou mais). Porém, poderíamos ter feito outras cosas diferentes dependendo da resolução detectada.

Os exemplos deste artigo pode-se ver em uma página à parte.