En muchas ocasiones es interesante conocer información sobre la pantalla del usuario, para ello tenemos el objeto screen en Javascript. Este objeto nos ayuda por ejemplo a poder determinar el ancho y alto de una pantalla, entre otras cosas. De hecho yo tuve que utilizarlo en una ocasión que realice una aplicación para una pantalla táctil de unas medidas muy específicas en un parque industrial, donde había que colocar un teclado digital.

Vamos a estudiar las propiedades de este objeto y viendo como funciona:

Calculando el ancho y el alto de la pantalla

Para que Javascript nos diga el ancho de la pantalla, tan solo necesitamos utilizar la propiedad width de la siguiente forma:

alert("El ancho de la pantalla es " + screen.width);

Y para saber el alto tan solo en necesario cambiar width por height

alert("El alto de la pantalla es " + screen.height);

Naturalmente podemos guardar esta información dentro de una variable para poder trabajar con ella.

Pero esta información recibida tiene un problema, cuenta toda la pantalla, y no siempre disponemos de toda la pantalla para trabajar, por ejemplo en windows podemos tener la barra lateral abajo o en un lateral, por lo que podemos programar convencidos de una medida en pixeles, cuando en realidad es otra.

Afortunadamente el objeto screen en javascript mantiene dos propiedades que nos permiten calcular la parte disponible de la pantalla, estas son; availWidth y availHeight:

alert("El ancho disponible de la pantalla es " + screen.availWidth);
alert("El alto disponible de la pantalla es " + screen.availHeight);

Calculando la profundidad de color de la pantalla

Utilizando la propiedad screen.colorDepth obtenemos el número de bits utilizados para mostrar un color.

alert("La profundidad de color en bits de la pantalla es " + screen.colorDepth);

Antes se podía utilizar también la propiedad pixelDepth, para calcular la profundidad de píxeles de la pantalla pero hoy en día es indiferente cual de las dos utilizar.