Detectar la resolución de la pantalla del usuario con Javascript

Con Javascript se puede calcular la resolución de la pantalla del usuario que nos visita. Atención, 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, 1024x760, 1280x800… y se configuran por el usuario en el panel de control, en propiedades de pantalla.

Nosotros con Javascript podemos acceder a esos valores a través del objeto screen:

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

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

La resolución actual de tu pantalla es:

<script language="JavaScript">
document.writeln(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:

Tu pantalla la consideramos:

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

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.

Los ejemplos de este artículo se pueden ver en una página aparte.