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!