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


152

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%?)


77
La función de zoom de página de Firefox aparece en todos los navegadores modernos; replicarla parece bastante inútil.
Quentin

1
Estoy de acuerdo con David Parece una especie de sentido replicar este ya que los navegadores ahora días tienen esta característica construidas en ....
usuario

55
En realidad, esta sería una característica increíblemente útil para dispositivos móviles. Muchos teléfonos ahora están aumentando su PPI sin tener en cuenta la diferencia (aparte del iPhone4, por supuesto).
DA.

38
No es replicarlo. Puede ser útil para algo como una vista previa de página / elemento en un div incrustado.
RichieHH

3
El diseñador de la página debería poder establecer un zoom predeterminado para su página. Tengo una página que era grande cuando la hice, pero ahora pequeña debido a las pantallas de alta resolución: lonniebest.com/CardTrick En lugar de rehacer la página, me gustaría hacer zoom de forma predeterminada.
Lonnie Best

Respuestas:


182

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;
} 

1
La propiedad de zoom patentada solo es compatible con IE. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin

15
David, esa referencia está muy desactualizada; mira las versiones del navegador que enumera. CSS Zoom es compatible con todos los principales navegadores actuales, excepto Firefox. Y no es más propietario que cualquiera de las extensiones CSS -moz-.
Jon Galloway

3
Nota: Creo que las otras soluciones que se han propuesto, como em y el escalado basado en%, son más "puras" pero no son necesariamente prácticas en la mayoría de los diseños web a menos que haya construido de esa manera desde cero.
Jon Galloway

1
He probado Opera 10b2 y no parece admitirlo. Firefox se comporta de forma extraña cada noche (el fragmento ampliado desaparece). IE5 / 6 tienen errores. Funciona bien solo en WebKit.
Kornel

2
gracias jon, gran información! en firefox -moz-transform scale efectivamente funciona, pero dependiendo de su caso de uso, es posible que deba corregir la posición del elemento usando -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform -origin )
futtta

80

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.


1
Gracias por esto, pero necesita algunos puntos y comas entre las declaraciones. Además, cuando probé esto, la página se movió hacia la izquierda, más allá del margen izquierdo, de modo que la parte izquierda de la página ya no era visible. Añadiendo las diversas declaraciones "... transform-origin: 0 0" correspondientes se corrigió eso.
Dave Burton el

Sí, debería haber mencionado que el contenido está recortado transform. Gracias por el comentario.
kumarharsh

1
Estoy de acuerdo con @Dave Burton: usar transform-origin: 0 0;hace lo que quiero. Por ejemplo, para acercar o alejar la página a 150%: transform: scale(1.5); transform-origin: 0 0;. Creo que la buena respuesta de @kumar_harsh debería corregirse.
Kai Carver

@KaiCarver si usa este método, siempre dará como resultado el recorte. No importa para qué punto utilices transform-origin. Lo que escribí es solo un ejemplo de qué valor usar. Por supuesto, es libre de usar transform-origin: 0 0si se adapta a su caso de uso (o si no le importa lo que hay en la esquina inferior derecha)
kumarharsh

@AngularM, ¿puede compartir un fragmento de código para mostrar el comportamiento? Estoy seguro de que hay alguna otra razón para esto.
kumarharsh

18

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.


3
Eso solo cambiaría el tamaño de mis fuentes. La propuesta CTRL + también amplía anchos fijos, alturas y tamaños de imagen también.

2
Lo sé, pero es lo más parecido que puedes obtener con CSS puro. Además, no solo cambian las fuentes, sino todo lo que se especifica en las dimensiones como un múltiplo del tamaño de la fuente. Es decir, todo lo que usaste %, emo exunidades.
Joey el

1
Eso no es correcto. He probado la solución que enumeré a continuación (propiedades de zoom + -moz-transform), y funciona en FF3.5, IE6 +, Safari y Opera. Escala imágenes y texto. Puede escalar páginas en CSS.
Jon Galloway

6

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.


No entiendo, si digo body {font-size: 62.5%; font-size: 125%}: ¿cómo definiría eso que 1em sea 10px? ¿Podría el navegador simplemente ignorar la primera declaración de tamaño de fuente y luego simplemente hacer 125% = 10px?

Creo que entendiste mal. no harías las dos cosas al mismo tiempo. 62.5 x2 = 125 ... para mostrar cómo puede escalar cosas ajustando el valor.
Ape-inago

Sí. Debería haber dicho 'entonces si usas Javascript para configurar el cuerpo {font-size: 125%} todos los elementos de la página se duplicarán en tamaño'.
e100

3

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)+"%"

2
 * {
transform: scale(1.1, 1.1)
}

esto transformará cada elemento de la página


1

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.


1

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.)


Es una función estándar del navegador, pero agregar la función directamente al sitio significa que no tiene que confiar en (1) la experiencia del usuario con su navegador de elección y (2) instrucciones específicas del navegador
Ags1

1

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 + "%";
        }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.