Adaptando tú Diseño a la Resolución del Usuario

>> //seccion/javascript/ -- 3 comentario /// Agregado el 2004-11-09 @ Por kaioken

¿Alguna vez te has preguntado como ocupar ese espacio perdido de tu diseño? b)

Normalmente nosotros diseñamos pensando en los usuarios con resolución menor de 1024 x 768. Pero ¿y los usuarios de esta, que pasara con ellos?

Algunos pensaran, fácil solo cambio los width de mi tabla de px (pixel) a % (por ciento); y si tienes razón de esta manera se agrande tu diseño dependiendo de la resolución, pero en este tutorial vamos un paso mas adelante.

Utilizaremos un Javascript para modificar el diseño y ajustarlo de manera especifica al diseño que queramos

Code:


 <SCRIPT LANGUAGE="Javascript">
 if (screen.width <= 800 && screen.height <= 600) {
      document.write("Imprimes lo que quieras");
 }
 else if (screen.width == 1024 && screen.height == 768){
      document.write("Imprimes lo que quieras");
 }
 else {
     document.write("Imprimes lo que quieras");
 }
 </SCRIPT>
 
 //En cada validación lo que se hace es asegurar un cambio al diseño y será único para cada uno, no tendremos que hacerlo general.
 


Ahora si quieres hasta puedes agregar mas contenido dependiendo que resolución que sea, y tomar mas control de la pantalla de tu usuario.

Utilizando este Javascript puedes ponerlo al inicio y asi cambiarle el tamaño a la tabla general de tu diseño.

Ejemplo:

Code:

 <SCRIPT LANGUAGE="Javascript">
 if (screen.width <= 800 && screen.height <= 600) {
      document.write("<table width=100% border=0 align=center cellpadding=0 cellspacing=0>");
 }
 else if (screen.width == 1024 && screen.height == 768){
      document.write("<table width=96% border=0 align=center cellpadding=0 cellspacing=0>");
 }
 else {
      document.write("<table width=94% border=0 align=center cellpadding=0 cellspacing=0>");
 }
 </SCRIPT>
 


Espero que les sirva como me ayudo a mí con la V3

MC | #permalink 3 comentario