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

14/11/06 - 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.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

  Ir arriba