texto - title html css

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

Question

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

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

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

Answer 1

CSS no podrá ampliar a demanda, 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 replicarlo. De hecho, replicarlo ralentizará su sitio web (más cosas para cargar, más JS o CSS para analizar, ejecutar y aplicar, etc.)

Answer 2

Como dice Johannes, no hay suficientes representantes para comentar directamente su respuesta, puedes hacerlo siempre y cuando las dimensiones de todos los elementos se especifiquen como un múltiplo del tamaño de la fuente. Es decir, todo lo que usaste%, em o ex unidades". Aunque creo que% se basan en elementos que contienen, no en tamaño de letra.

Y normalmente no usarías 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 defines 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 (por ejemplo) imágenes cuadradas de width: 10em; height: 10em; con width: 10em; height: 10em; width: 10em; height: 10em; y suponiendo que la escala de Firefox está configurada en forma predeterminada, 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.

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

Answer 4

Creo que es imposible hacer eso solo con CSS: puede que necesites ensuciarte la mano con Javascript para asegurarte de que el trabajo se realice correctamente.

Answer 5

Es posible que pueda usar la propiedad de zoom 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 de bugzilla aquí ) pero puede usar la propiedad "patentada" -moz-transform en Firefox 3.5 .

Entonces podrías usar:

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

Answer 6

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

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

para ampliar la página en un 110%. Aunque el estilo de zoom está ahí, Firefox aún no lo admite con tristeza.

Además, esto es ligeramente diferente de su zoom. La css transform funciona como un zoom de imagen, por lo que ampliará su página pero no causará reflujo, etc.

Editar actualizado el origen de la transformación.

Answer 7

Jon Tan ha hecho esto con su sitio - http://jontangerine.com/ Todo lo que incluye 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 exactamente el mismo resultado.

Answer 8

Si su CSS se construye completamente alrededor de ex o em units, entonces esto podría ser posible y factible. Solo necesita declarar font-size: 150% en su estilo para body o html . Esto debería causar que todas las demás longitudes se escalen proporcionalmente. No puedes escalar las 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.