Sólo otro blog infame


Menú


Maquetación dependiente de la resolución

¿No sería una chulada que una web se adaptase de verdad al tamaño del navegador?.

No me refiero a las páginas elásticas con las que al final el texto termina siendo minúsculo; me refiero a que las estructuras de la maquetación cambien, por ejemplo el número de columnas.

Una misma página podría verse así en un monitor de 1024 x 768,

1024

Y así en una PSP,

PSP

¿Imposible?

Pues va a ser que no, y es que ya han puesto la primera piedra. Abre esta página y cambia el tamaño del navegador para comprobar el funcionamiento.

Por cierto, el salto se produce a partir de 800 x 600, y creo que en Internet Explorer (¡que retortijón!) no funciona.

(robado de Populicious)

# DesarRollo web,Experimentos,Usabilidad, Friday, 20 de January de 2006 a las 00:01

7 comentarios, amigos del internec

  1. Hola, otro ejemplo puedes verlo en la web de la fundación asturiana CTIC : http://www.fundacionctic.org/

    Un saludo, mola el blog ;-)

    # Kids 20 de January de 2006 a las 00:40

  2. Podrían poder de forma mas explicita el código a usar para que salga así. No me lo he mirado mucho pero me parece que para poder usarlo me voy a tener q chupar todo su CSS y código…

    # show 20 de January de 2006 a las 13:55

  3. Pues si, la verdad es que es un poquíto críptico, pero vamos, a ver si conseguimos extraer la idea principal y nos podemos a usarla despiadádamente.
    (Violando innumerables derechos de autor)

    # Hugo 20 de January de 2006 a las 14:03

  4. Yo entiendo poquito ingles, pero lo que esta haciendo el tio ya se usa desde hace tiempo quiero decir, si tu tienes 2 hojas de estilos, una por defecto donde todos los contenidos estan a una sola columna, y otra donde si la resolucion es a 1024 esta a 3 columnas, leyendo con php (por ejemplo) la resolucion del usuario le decimos que cargue una o otra hoja de estilos.

    digo que esto es lo que me parecio leer a mi en esa web, pero tienes que hacer el trabajo dos veces, vamos diseñar dos hojas de estilos, yo pensaba que habian encontrado la forma de hacerlo automaticamente, que igual es cierto y me llevo una alegria

    saludos

    # noth 22 de January de 2006 a las 15:06

  5. Es cierto que la clave es utilizar varias hojas de estilo (con el consiguiente curro que lleva) pero yo nunca lo había visto aplicado a las dimensiones del navegador en cada momento.
    Sólo con el típico “print”, “screen”, etc.

    Si conoces algún ejemplo de sitio que haga esto, pásamelo please.

    # Hugo 22 de January de 2006 a las 15:13

  6. mira una forma de hacerlo seria así


    <script language="JavaScript1.2">
    if ( screen.width == 1024){
    document.write('<link href="css/pagina_1024.css" rel="stylesheet" type="text/css" media="screen" />');
    }
    else {
    document.write('<link href="css/pagina_default.css" rel="stylesheet" type="text/css" media="screen" />');
    }

    Autor: Noth

    un saludo

    # noth 22 de January de 2006 a las 20:31

  7. Buen código, pero no le afecta el tamaño de la ventana en cuestión, se basa en la resolución global de pantalla (que no es poco, la verdad).

    Pero lo que hace esta gente es algo más avanzado, se han hecho esta función y el resto ya es como tu código:


    function getBrowserWidth()
    {
    if (window.innerWidth)
    {
    return window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth != 0)
    {
    return document.documentElement.clientWidth;
    }
    else if (document.body)
    {
    return document.body.clientWidth;
    }
    return 0;
    };

    # Hugo 22 de January de 2006 a las 20:49