El objeto window.screen contiene información sobre la pantalla del usuario.
El objeto window.screen se puede escribir sin el prefijo de ventana.
Propiedades:
pantalla.ancho
pantalla.altura
pantalla.availWidth
pantalla.availHeight
pantalla.colorDepth
pantalla.pixelDepth
La propiedad screen.width devuelve el ancho de la pantalla del visitante en píxeles.
Muestra el ancho de la pantalla en píxeles:
document.getElementById("demo").innerHTML =
"Screen Width: " + screen.width;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen width is " + screen.width;
</script>
</body>
</html>
La propiedad screen.height devuelve la altura de la pantalla del visitante en píxeles.
Muestra la altura de la pantalla en píxeles:
document.getElementById("demo").innerHTML =
"Screen Height: " + screen.height;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
</script>
</body>
</html>
La propiedad screen.availWidth devuelve el ancho de la pantalla del visitante, en píxeles, menos características de la interfaz como la barra de tareas de Windows.
Muestra el ancho disponible de la pantalla en píxeles:
document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen width is " + screen.availWidth;
</script>
</body>
</html>
La propiedad screen.availHeight devuelve la altura de la pantalla del visitante, en píxeles, menos funciones de interfaz como la barra de tareas de Windows.
Muestra la altura disponible de la pantalla en píxeles:
document.getElementById("demo").innerHTML =
"Available Screen Height: " + screen.availHeight;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available screen height is " + screen.availHeight;
</script>
</body>
</html>
La propiedad screen.colorDepth devuelve el número de bits utilizados para mostrar un color.
Todas las computadoras modernas utilizan hardware de 24 o 32 bits para la resolución del color:
24 bits = 16.777.216 "colores verdaderos" diferentes
32 bits=4.294.967.296 "colores profundos" diferentes
Las computadoras más antiguas usaban 16 bits: 65,536 resoluciones diferentes de "colores altos".
Las computadoras muy antiguas y los teléfonos móviles antiguos usaban 8 bits: 256 "colores VGA" diferentes.
Muestra la profundidad de color de la pantalla en bits:
document.getElementById("demo").innerHTML =
"Screen Color Depth: " + screen.colorDepth;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
Los valores #rrggbb (rgb) utilizados en HTML representan "colores verdaderos" (16,777,216 colores diferentes)
La propiedad screen.pixelDepth devuelve la profundidad de píxeles de la pantalla.
Muestra la profundidad de píxeles de la pantalla en bits:
document.getElementById("demo").innerHTML =
"Screen Pixel Depth: " + screen.pixelDepth;El resultado será:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
</script>
</body>
</html>
Para las computadoras modernas, la profundidad de color y la profundidad de píxeles son iguales.