Resolución de la pantalla

02/Jun/2007 JavaScript , 10 Comentarios

Los diseños que hagamos de páginas web siempre van a quedar supeditados a la resolución de pantalla que tenga el usuario final. Si nuestro entorno de desarrollo es acotado (por ejemplo, dentro de una empresa que controle la resolución de sus ordenadores) nos será más sencillo el diseñar nuestras páginas web, si por el contrario desarrollamos páginas para la web, deberemos buscar que nuestra página se adapte a todas las resoluciones y que aproveche el máximo de ellas.

Esto normalmente se consigue mediante las hojas de estilo y los diseños relativos. Me explico, dependiendo de la resolución que tenga el usuario se le aplica una hojas de estilo u otra.

Es por ello que necesitaremos saber la resolución de la pantalla del usuario. Esto lo podemos conseguir mediante JavaScript y en concreto con el objeto screen. Este es un objeto que empezaron a definir los primeros navegadores de forma independiente y que ahora forma parte del conocido como HTML DOM.

Las propiedades que más nos interesan de este objeto serían:

  • width, valor del ancho de la pantalla.
  • height,valor del alto de la pantalla.
  • avaibleWidth, contiene el valor del ancho de la pantalla, sin incluir la barra de tareas de Windows.
  • avaibleHeight, contiene el valor del alto de la pantalla, sin incluir la barra de tareas de Windows

Para acceder a ellos, simplemente deberemos de poner:

  1. Screen.nombrepropiedad;

Por ejemplo, para mostrar el alto/ancho de la ventana por pantalla, deberíamos de utilizar el siguiente código:

  1. document.write("Su resolución es de: " + screen.height + "x" + screen.width);

Vídeos sobre Javascript


10 comentarios en “Resolución de la pantalla”

Víctor Cuervo

lineadecodigo

@lulimar espinoza,

El cálculo de la resolución de pantalla es solo un ejemplo. Pero no es muy recomendable el uso para desarrollo de páginas.

Si quieres hacer una aplicación que se visualice en el mayor número de terminales deberías de hacer dos cosas:

a) En primer lugar diseñarla para 1024×768.
b) Hacer que la aplicación sea líquida. Es decir, que si alguien que tenga 800×600 o 1280×1024 pueda visualizarla de forma correcta. Para ello tendrás que maquetar en relativo y con medidas absolutas (es decir, en “ems”).

Espero que esto pueda orientarte.

Víctor Cuervo

lulimar espinoza

necesito una funcion estandar q me ayude a resolver el problema con todos los tipos de resoluciones de pantallas, ya q el estar comparando una por una no me parece optimo,

Víctor Cuervo

vicki

a mi me podrian ayudar para que automaticamente el fondo se adapte a cualquier resolucion de pantallas
necesitpo un codigo trabajo en html grax

Víctor Cuervo

Juan Felipe

y cuando necesitamos saber cuales son las dimensiones del sitio sin incluir la barra de navegacion y la barra de Scroll del navegador, como se haría. es que estoy tratando de colocar una capa absoluta en una posicion de la pantalla, pero esta tiene que ser con respecto a otra capa, no sé como hacerle. Yo tengo una tabla en el centro de mi navegador y dentro de la tabla tengo una imagen al 100% de la tabla, lo que quiero es colocar imagenes en cada esquina de la imagen de la tabla, para esto necesito colocarlas como absolutas para que se vean por encima de la imagen de la tabla, pero no sé como hacer, Ayuda Please.

Víctor Cuervo

lineadecodigo

Hola Naya,

Si quieres que se adapte a cualquier monitor tienes que hacer un desarrollo utilizando hojas de estilo para controlar los tamaños y utilizar unidades relativas. De esta forma el diseño se adaptará al tamaño que tenga el dispositivo final.

Víctor Cuervo

Naya

hola, mi problema radica en que ahora hay monitores de portatiles panirámicos y las pág que hago con front Page oues aparecen desplazadas, como puedo hacer para que la pág se adapte a la resolucion que sea….. gracias

Víctor Cuervo

Leonardo Nelay Rodriguez

Buenas noches, como puedo yo detectando la resolucion en js, utilizarla en el codigo asp de mi pagina, no me sale ya que entiendo que js se ejecuta luego del lado del cliente mientras que asp ya lo hizo del lado del servidor.

Saludos

Víctor Cuervo

Victor

Exacto, no sé si sea la forma más elegante de hacer las cosas, pero hay veces en que, no solo es la resolución de pantalla, sino también los navegadores los que provocan que una sola hoja de estilo no quede bien para todos… Los navegadores manejan de forma diferente los porcentajes, y es ahi donde, si se usa un porcentaje que se bien en “tal” navegador, en el otro no; y lo peor es que ahora hay como una lluvia de navegadores, entre Internet Explorer, Firefox, Opera, Safari, Konqueror, etc…

Ahora, por el momento a mi me parece que los estandares estan un poco verdes y no definen bien algunas cosas, a eso hay que agregarle la gracia de Microsoft de poner algunas cosillas diferentes a su navegador.

Como comento, talvez (y digo TALVEZ!) esta no sea la solucion mas elegante, pero por el momento, creo que, en algunos casos, es la mejor que hay.

Saludos!

Víctor Cuervo

lineadecodigo

Buen comentario usr…

La idea es solo utilizar los datos de la resolución para usar una hoja de estilos u otra.

Si bien, efectivamente los posicionamientos deben de ser relativos. Aunque habrá veces, que posiblemente necesites hacer alguna cosa adhoc.

Víctor Cuervo

usr

Mejor utilizar tamaños relativos en lugar de hacer un página para cada resolución.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*