¿Cómo puedo escalar una página web completa con CSS?

Con Firefox, puede ampliar una página web completa simplemente presionando CTRL +. Lo que esto hace es ampliar proporcionalmente toda la página web (fuentes, imágenes, etc.).

¿Cómo puedo replicar la misma funcionalidad usando simplemente CSS?

¿Hay algo así page-size: 150%(que aumentaría las porciones completas de la página en un x%?)

Es posible que pueda usar la zoompropiedad CSS , compatible con IE 5.5+, Opera y Safari 4, y Chrome

¿Puedo usar: css Zoom

Firefox es el único navegador importante que no admite Zoom ( elemento bugzilla aquí ), pero podría usar la propiedad "propietaria" -moz-transform en Firefox 3.5 .

Entonces podrías usar:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

Esta es una respuesta bastante tardía, pero puede usar

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

para ampliar la página en un 110%. Aunque el zoomestilo está ahí, Firefox todavía no lo admite tristemente.

Además, esto es ligeramente diferente a su zoom. El css transformfunciona como un zoom de la imagen, por lo que ampliará su página, pero no causa reflujo, etc.

Editar actualizó el origen de la transformación.

Si el CSS está construido completamente alrededor exo emunidades, entonces esto podría ser posible y factible. Solo necesita declarar font-size: 150%en su estilo para bodyo html. Esto debería causar que cada dos longitudes se escalen proporcionalmente. Sin embargo, no puede escalar imágenes de esta manera, a menos que también tengan un estilo.

Pero eso es muy grande si en la mayoría de los sitios, de todos modos.

Como dice Johannes, no hay suficientes representantes para comentar directamente sobre su respuesta, puede hacerlo siempre y cuando todas las dimensiones de los elementos se especifiquen como un múltiplo del tamaño de la fuente. Es decir, todo lo que usó%, em o ex unidades". Aunque creo que% se basa en el elemento contenedor, no en el tamaño de fuente.

Y normalmente no usaría estas unidades relativas para las imágenes, dado que están compuestas de píxeles, pero hay un truco que hace que esto sea mucho más práctico.

Si define, body{font-size: 62.5%};entonces 1em será equivalente a 10px. Hasta donde yo sé, esto funciona en todos los navegadores principales.

Luego, puede especificar sus (p. Ej.) Imágenes cuadradas de 100 px width: 10em; height: 10em;y, suponiendo que la escala de Firefox esté configurada por defecto, las imágenes tendrán su tamaño natural.

Hacer body{font-size: 125%};y todo, incluidas las imágenes, tendrá el doble de tamaño original.

Con este código, 1em o 100% será igual al 1% de la altura del cuerpo

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

esto transformará cada elemento de la página

Jon Tan ha hecho esto con su sitio: http://jontangerine.com/ Todo, incluidas las imágenes, ha sido declarado en ems. Todo. Así es como se logra el efecto deseado. El zoom de texto y el zoom de pantalla producen casi el mismo resultado.

CSS no podrá hacer zoom a pedido, pero si combina CSS con JS, podría cambiar algunos valores para hacer que una página se vea más grande. Sin embargo, como se ha dicho, esta característica es estándar hoy en día en los navegadores modernos: no es necesario replicarla. De hecho, replicarlo ralentizará su sitio web (más cosas para cargar, más JS o CSS para analizar, ejecutar y aplicar, etc.)

Tengo el siguiente código que escala la página completa a través de las propiedades CSS. Lo importante es establecer body.style.width en el inverso del zoom para evitar el desplazamiento horizontal. También debe establecer transform-origin en la parte superior izquierda para mantener la parte superior izquierda del documento en la parte superior izquierda de la ventana.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }