Tela da Janela JavaScript

O objeto window.screen contém informações sobre a tela do usuário.

Tela do Windows

window.screen O objeto pode ser escrito sem o prefixo window:

Atributo:

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

Largura da tela do Windows

screen.width A propriedade retorna a largura da tela do visitante em pixels.

Exemplo

Exibe a largura da tela em pixels:

document.getElementById("demo").innerHTML = "Largura da tela: " + screen.width;

O resultado será:




Experimente pessoalmente






Altura da tela do Windows


screen.height A propriedade retorna a altura da tela do visitante em pixels.


Exemplo


Exibe a altura da tela em pixels:


document.getElementById("demo").innerHTML = "Altura da tela: " + screen.height;



O resultado será:





Experimente pessoalmente






Largura da tela disponível do Windows


screen.availWidth A propriedade retorna a largura da tela do visitante em pixels, subtraindo características da interface como a barra de ferramentas da janela.


Exemplo


Exibe a largura da tela disponível em pixels:


document.getElementById("demo").innerHTML = "Largura da tela disponível: " + screen.availWidth;



O resultado será:





Experimente pessoalmente






Altura da tela disponível do Windows


screen.availHeight A propriedade retorna a altura da tela do visitante em pixels, subtraindo características da interface como a barra de ferramentas da janela.


Exemplo


Exibe a altura da tela disponível em pixels:


document.getElementById("demo").innerHTML = "Altura da tela disponível: " + screen.availHeight;



O resultado será:





Experimente pessoalmente






Profundidade de cor da tela do Windows


screen.colorDepth A propriedade retorna o número de bits usados para exibir uma cor.


Todos os computadores modernos usam a resolução de cores de hardware de 24 ou 32 bits:


    

  • 24 bits = 16.777.216 diferentes "True Colors"
    • 

  • 32 bits = 4.294.967.296 diferentes "Deep Colors"
    • 



Computadores mais antigos usam 14 bits: 65,536 cores diferentes de "High Colors" resolução.


Computadores muito antigos e celulares antigos usam 8 bits: 256 cores diferentes de "VGA colors".


Exemplo


Exibir a profundidade de cor da tela em bits:


document.getElementById("demo").innerHTML = "Profundidade de Cor da Tela: " + screen.colorDepth;



O resultado será:





Experimente pessoalmente


Os valores #rrggbb (rgb) usados no HTML representam "True Colors" (16,777,216 cores diferentes).






Profundidade de Pixel da Tela Window


screen.pixelDepth A propriedade retorna a profundidade de pixel da tela.


Exemplo


Exibir a profundidade de pixel da tela em bits:


document.getElementById("demo").innerHTML = "Profundidade de Pixel da Tela: " + screen.pixelDepth;



O resultado será:





Experimente pessoalmente


Para computadores modernos, a profundidade de cor e a profundidade de pixel são iguais.