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

  • Por
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:

  • Con screen.width obtenemos el ancho en pixels de la definición de pantalla.
  • Con screen.height obtenemos el alto en pixels del monitor.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Andres

20/11/2006
Pero podemos configurar el tamaño de la pantalla de los usarios que nos visiten, es decir que la pagina creada por nosotros sea de acuerdo a la configuración de pantalla que tenga el usuario

Carlos

23/11/2006
Muy interesante pero... ¿funcionará en todos los navegadores?

Saludos.

Johnny

09/7/2010
Gracias
Realmente me sirvio GRACIAS

Nery_Nicolas

28/5/2011
Configurar la resolución de una pag
Yo quiero saber lo mismo que le amigo andrés. Como para no quedar pagando con pantallas grandes de más 20 pulgadas. Supongo que la media debe ser de 19

jr

14/2/2013
Y para banners
Hola ¿y para banner, para mostrar o no un banner cómo hago?

Gustavo

08/1/2015
Reconocimiento del tamaño de una pantalla
Está claro como se puede reconocer el tamaño de una pantalla. Pero, una vez conocida la resolución de esa pantalla, ¿como podemos redireccionar nuestra información (o página web) para que se adecue al tamaño de esa pantalla desde la que se nos solicita?. Es decir, si tengo tres formatos de página web, para distintos "tamaños" de pantalla desde los que se puede acceder a ella, ¿como lo puedo redireccionar con javascript?.

Gustavo

27/4/2016
Resolucion de pantalla
Si quieres saber la resolucion de tu pantalla vas a http://www.cualesmiresolucion.com/ y alli te dice cual es tu resolucion de pantalla y como cambiarla en mac o windows

Micheal Benson

17/3/2019
OFERTA DE PRÉSTAMO 2019
Hola, estoy feliz de anunciarle una verdadera compañía de préstamos de la que puede obtener un préstamo rápido, ofrecemos todo tipo de préstamos a nuestros clientes de confianza con una tasa de interés del 3%, contáctenos si necesita un préstamo. Envíenos un correo electrónico Michealbensonloanagency@gmail.com
Formulario de solicitud de préstamo y devuélvalo. Whatsapp: +61447666281

Nombre completo .................

Años ..............

País ..................
 
Cantidad del préstamo necesaria. ..................

Duración..........................