Con Javascript es posible calcular la resolución de la pantalla del usuario que nos visita, es decir, el tamaño en píxeles que se estén usando en el monitor. Para aclarar posibles malentendidos: no nos referimos al tamaño de la ventana del navegador, sino al tamaño total en pixels que tengamos cofigurado en nuestro sistema.

Las resoluciones de pantalla pueden ser valores como 800x600 (en los monitores de antaño), 1024x760, 1280x800... y en las pantallas actuales valores mayores como 1280x720, 1920×1080 o incluso más... En los ordenadores personales estas dimensiones se configuran por el usuario en el panel de control, en propiedades de pantalla. Ya en dispositivos, es algo que viene dado por el fabricante y la pantalla instalada.

En cualquier caso, a veces es necesario acceder a las dimensiones de la pantalla del cliente que nos está visitando. Es algo que podemos hacer desde programación Javascript a través del objeto screen:

Objeto screen (window.screen)

El objeto screen forma parte del Modelo de Objetos del Navegador (BOM, por sus siglas en inglés) y se utiliza para obtener información sobre la pantalla del dispositivo del usuario. Este objeto es muy útil para adaptar el contenido y la interfaz gráfica a diferentes tamaños de pantalla y resoluciones.

El objeto screen depende del objeto window. Tiene dos propiedades, con la anchura y la altura de la pantalla, que las podemos usar de la siguiente manera:

• Con screen.width obtenemos el ancho en pixels de la definición de pantalla.
• Con screen.height obtenemos el alto en pixels del monitor.

Usar el objeto screen

Entonces, si quisiéramos visualizar los valores ancho y alto de la resolución de pantalla podríamos utilizar un javascript como este:

<script> 
alert("La resolución de tu pantalla es: " + screen.width + " x " + screen.height) 
</script>

Si lo deseamos, podemos hacer distintas cosas dependiendo de la definición de pantalla del usuario, por ejemplo, con una estructura if:

<p>
Tu pantalla la consideramos: 

<script> 
if (screen.width < 1024) 
   document.write ("Pequeña") 
else 
   if (screen.width < 1280) 
      document.write ("Mediana") 
   else 
      document.write ("Grande") 
</script>
</p>

Este código mostrará el tamaño de la ventana como pequeña (menos de 1024 píxeles de ancho), mediana (Mayor o igual a 1024 píxeles de ancho y menor de 1280) o grande (1280 píxeles de ancho o más). Pero podríamos haber hecho otras cosas distintas dependiendo de la resolución detectada.

La propiedad window.screen forma parte de versiones muy antiguas de Javascript, por lo que no tendrás problema en usarla en cualquier navegador, antiguo o nuevo. También funciona en navegadores para dispositivos, como tablets o móviles.

Otras propiedades del objeto screen del navegador

Antes de acabar este artículo voy a poner un listado de las propiedades más comunes del objeto screen en los navegadores web actuales:

screen.availHeight: Retorna la altura disponible de la pantalla en píxeles, excluyendo las características del interfaz como la barra de tareas de Windows.

screen.availWidth: Retorna el ancho disponible de la pantalla en píxeles, excluyendo las características del interfaz como la barra de tareas de Windows.

screen.height: Retorna la altura total de la pantalla en píxeles.

screen.width: Retorna el ancho total de la pantalla en píxeles.

screen.colorDepth: Retorna el número de bits usados para los colores en la pantalla. Esto puede ser útil para determinar la calidad del color soportado en el dispositivo.

screen.pixelDepth: Similar a colorDepth, esta propiedad retorna el número de bits por píxel.

screen.orientation Proporciona información sobre la orientación actual de la pantalla (por ejemplo, si está en modo paisaje o retrato). Esta propiedad es un objeto que incluye dos subpropiedades:

• type (por ejemplo, 'landscape-primary', 'portrait-secondary', etc.)
• angle (el ángulo de la orientación respecto a su estado natural)