zoom a todo según resolución

[kuan_ji]

Buenas!

Es la primera vez que necesito implementar algo en css (hasta ahora había hecho alguna pequeña modificación ) así que ando bastante (totalmente) perdido


En esencia y como dice el título,... quiero cambiar el zoom de una página según la resolución del dispositivo que la visita...

por ejemplo si el dispositivo es 800x600 como la página está pensada para 1024x768 quiero que se aplique un factor zoom de 0,8 (800/1000)

si el dispositivo es 1920x1080 se deberia aplicar un factor 1,92 (1920/1000)

lo que pretendo es que la página se vea lo más parecida posible en todos los ordenadores...

tras leer varios foros donde se habla de css y juntando partes de código como buenamente he podido, había pensado poner algo así:

Código:

if (window.screen.width <= 1024) {

-webkit-transform:scale(window.screen.width/1000);  
-moz-transform:scale(window.screen.width/1000);
-o-transform:scale(window.screen.width/1000);
-ms-transform:scale(window.screen.width/1000);
-webkit-transition:0.8s;   
-moz-transition:0.8s;
-o-transition:0.8s;
-ms-transition:0.8s;

} else if (window.screen.width >> 1024) {

-webkit-transform:scale(window.screen.width/1000);  
-moz-transform:scale(window.screen.width/1000);
-o-transform:scale(window.screen.width/1000);
-ms-transform:scale(window.screen.width/1000);
-webkit-transition:0.8s;   
-moz-transition:0.8s;
-o-transition:0.8s;
-ms-transition:0.8s;

}

pero no parece funcionar en absoluto ... (lo he puesto en style.css de un blog wp pues creo que es el lugar indicado)

la página consiste en una imágen header de 1000X80 px y en el "index" hay una imagen de 900x650 mapeada con 5 enlaces -centro y cada esquina-

en el resto de páginas habrá texto y alguna imágen (y más o menos me da igual que descuadre un poco) pero es importante que el zoom se aplique de forma optima en el index (para que afecte a la imagen y su mapeo)

Gracias Adelantadas!

[pzin]

¿Y ese código que tipo de lenguaje se supone que es? Porque si es CSS, no sé de donde has sacado que existen condicionales ni variables, y si es JavaScript, no tiene sentido alguno. Parece más bien JavaCSScript. Y eso no existe.

Léete algo acerca de diseño web responsivo y también acerca de cómo camboar el tamaño de viewport para adaptarlo de forma automática a cualquier dispositivo.

PD: Para editar los tags del tema, es justo aquí debajo de mi mensaje (o el último del tema), donde ves que están las etiquetas, a la derecha aparece editar etiquetas.

[kuan_ji]

Si, parece JavaCSScript++#.net

(solo tengo algún conocimiento de c++ y html, ¿se nota no?)

El tema wordpress con el que trabajo está hecho con "Artisteer" (de ahi mi poco nivel de css) y le voy metiendo mano a medida que necesito adaptalo

Leyendo: http://html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

y aqui: http://dev.w3.org/csswg/css-device-adapt/

This example sets the viewport to fit the width of the device. Note that it is enough to set the width as the height will be resolved from the width.

Código:

@viewport {
  width: device-width;
}

creo entender que si pongo algo tipo ese codigo al final de styles.css el viewport "detecta" el ancho de la pantalla

y poniendo algo tipo

Código:

@viewport {
    width: device-width;
    zoom: auto;
  }

debería ajustar el zoom según la resolución... y sin embargo no hace ni caso :(

¿no va en styles.css?
¿hace falta alguna librería (igual que en los jquery hace falta un .js)?

Como curiosidad (y por si sirve de algo):

la página a 1280x800 se ve como se espera, si la ves en una resolución mayor se centra (wow! , aunque espero que pueda hacerse un ligero zoom para aprovechar pantallas más grandes) pero si la ves en una resolución menor (1024x768 es la que uso para pruebas) la imágen de header se corta 100px a ambos lados, las banderas de los idiomas se descuadran y se mueven, y la imagen mapeada de la página de inicio se sale de los marcos del tema y aparecen barras de desplazamiento por todos lados :P

Ah! y gracias por decirme como cambiar las etiquetas,... había un par (todo, según) que no tenían mucho sentido :)

[pzin]

Prueba hacerlo así:

Código HTML:

<head>
  <meta name='viewport' content='width=device-width' />
  <style type='text/css'>
    @-ms-viewport { width: device-width; }
    @-o-viewport { width: device-width; }
    @viewport { width: device-width; }
  </style>
</head>
 

Lo que esté en style puede ponerlo en tu archivo CSS, lo pongo así por cuestiones de muestreo.

Así tal cual tendrás un mejor soporte para diferentes navegadores.

[kuan_ji]

nada, ... pongo esto dentro de <head> </head> en "header.php" y no se modifica en la forma en que se ve la página (estoy comprobando con Firefox y IE)



la página tiene un ancho fijo de 1000 px (que no está mal para 1280*x y 1024*x que asumo que son las más utilizadas), pero cuando lo veo en 800x600 o en una pantalla de tele (1920*1080) no se modifica el "zoom" y media página "se sale por la derecha" (800x600) o queda "mucho espacio a los lados" (FHD)

[pzin]

Es que el tema del viewport no es algo mágico.

Estás indicando que el ancho del viewport sea igual al ancho del dispositivo. Entonces, si entras con un móvil o cualquier resolución por debajo de 1000 pixeles el viewport medirá menos de 1000 pixeles y tu página se va a ver mal.

El problema por lo tanto no es el viewport, si no que tu página tiene un ancho fijo que tendrás que cambiar. Tendrás que cambiar bastantes cosas, no sólo el ancho principal. Cambiar todo a una estructura líquida y/o usar media-queries para hacer un diseño responsivo.

[kuan_ji]

Perdon por los dias de "standby"... ando liadete ;)

Conseguido! (en parte)

he movido el codigo del final del <head></head> al principio, justo debajo de la ultima meta etiqueta, y ha funcionado... en firefox, en IE6 lo he mirado con una resolución de 800x600 y parece que hace lo que quiere (todavia no he podido comprobar con resoluciones mayores ni otros navegadore, pero con esa "menor" ya hace lo que yo esperaba)

Ahora bien, me he agenciado una tablet para ver que pasaba si... y zas! el navegador de android hace caso omiso al viewport, y el chrome para android más de lo mismo... :(

en cambio si "quito zoom" con un pellizco, si que se ve la página como a mi me gustaría que se viera... ¿se puede modificar el zoom de un navegador de android o ios?

Es que el tema del viewport no es algo mágico.

Estás indicando que el ancho del viewport sea igual al ancho del dispositivo. Entonces, si entras con un móvil o cualquier resolución por debajo de 1000 pixeles el viewport medirá menos de 1000 pixeles y tu página se va a ver mal.

El problema por lo tanto no es el viewport, si no que tu página tiene un ancho fijo que tendrás que cambiar. Tendrás que cambiar bastantes cosas, no sólo el ancho principal. Cambiar todo a una estructura líquida y/o usar media-queries para hacer un diseño responsivo.

La página es muy simple,... es como una "diapositiva power point", algo así:



http://s2.subirimagenes.com/fotos/8474784sin-ttulo.jpg



Las páginas internas son prácticamente texto plano con alguna foto, así que no me importa que se modifique los parrafos o la posición de las fotos mientras no sea algo super descabellado...

[pzin]

Puedes indicar en la meta etiqueta del viewport un zoom máximo y mínimo:

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 

Había alguna forma, también en la meta, de indicar que no se pueda hacer zoom. Pero una forma u otra es el mismo resultado.

[kuan_ji]

en PC (chrome, IE y firefox) ya se comporta casi como esperaba, es muy aceptable

ahora la batalla la tengo perdida en android (y me imagino que ios prero mi economia no está como para comprobarlo jeje)

sigue sin quitarse zoom para poderlo ver "bien" en móvil

deberían estos parámetros que me has pasado funcionar en android o iOs?

Código:

    @-ms-viewport { width: device-width; }
    @-o-viewport { width: device-width; }
    @viewport { width: device-width; }

o se puede añadir alguna línea especifica para ello?

Gracias de nuevo!

[tonigomila1988]

Iniciado por kuan_ji

en PC (chrome, IE y firefox) ya se comporta casi como esperaba, es muy aceptable

ahora la batalla la tengo perdida en android (y me imagino que ios prero mi economia no está como para comprobarlo jeje)

sigue sin quitarse zoom para poderlo ver "bien" en móvil

deberían estos parámetros que me has pasado funcionar en android o iOs?



o se puede añadir alguna línea especifica para ello?

Gracias de nuevo!

Si te preocupa poder ver como queda en un dispositivo iPhone, seguro que el Sabelotodo Google te encuentra alguna página donde poder descargar emuladores de iPhone. Saludos.