> Manuales > Taller de Javascript

Hacemos un script javascript para detectar la resolución de la pantalla del visitante y hacer cosas distintas en función de la definición que tenga.

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 depende del objeto window. Tiene dos propiedades, con la anchura y la altura de la pantalla, que las podemos usar de la siguiente manera:

Nota: Como ya sabes, para acceder a cualquier objeto que depende de window no necesitas mencionar a window explícitamente. Por lo tanto "window.screen.width" sería equivalente que escribir "screen.width".

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.

Nota: Hay que aclarar que no se considera una buena práctica usar el método document.write() de Javascript. Este ejemplo lo debes de considerar como valor didáctico para aprender a usar el objeto screen para detectar las dimensiones de la pantalla.

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual