Tela da janela JavaScript

Índice

    Mostrar índice

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

Tela da janela

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

Propriedades:

  • largura da tela

  • screen.height

  • screen.availWidth

  • screen.availHeight

  • screen.colorDepth

  • screen.pixelDepth

Largura da tela da janela

A propriedade screen.width retorna a largura da tela do visitante em píxeis.

Exemplo

Exibir a largura da tela em pixels:

document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen width is " + screen.width;
</script>

</body>
</html>

Altura da tela da janela

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

Exemplo

Exibir a altura da tela em pixels:

document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen height is " + screen.height;
</script>

</body>
</html>

Largura disponível da tela da janela

A propriedade screen.availWidth retorna a largura da tela do visitante, em píxeis, menos recursos de interface como a barra de tarefas do Windows.

Exemplo

Exiba a largura disponível da tela em pixels:

document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen width is " + screen.availWidth;
</script>

</body>
</html>

Altura disponível da tela da janela

A propriedade screen.availHeight retorna a altura da tela do visitante, em pixels, menos recursos de interface como a barra de tarefas do Windows.

Exemplo

Exiba a altura disponível da tela em pixels:

document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Available screen height is " + screen.availHeight;
</script>

</body>
</html>

Profundidade de cor da tela da janela

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

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

  • 24 bits = 16.777.216 "True Colors" diferentes

  • 32 bits=4.294.967.296 "Cores Profundas" diferentes

Computadores mais antigos usavam 16 bits: 65.536 resoluções diferentes de "High Colors".

Computadores e celulares muito antigos usavam 8 bits: 256 "cores VGA" diferentes.

Exemplo

Exiba a profundidade de cor da tela em bits:

document.getElementById("demo").innerHTML = 
"Screen Color Depth: " + screen.colorDepth;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen color depth is " + screen.colorDepth;
</script>

</body>
</html>

Os valores #rrggbb (rgb) usados em HTML representam "True Colors" (16.777.216 cores diferentes)

Profundidade de pixel da tela da janela

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

Exemplo

Exiba a profundidade de pixels da tela em bits:

document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;

O resultado será:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Screen pixel depth is " + screen.pixelDepth;
</script>

</body>
</html>

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