¿Cómo aumentar el nivel de zoom del navegador en la carga de la página?Cómo aumentar el nivel de zoom del navegador en la carga de la página?
recientemente recibí la tarea de aumentar su ancho al igual que si Firefox presionamos Ctrl + y aumenta el nivel de zoom del navegador, ¿hay alguna manera de hacerlo automáticamente en todos los navegadores en la carga de la página.
personalmente creo que esto es una mala idea; diseñe su sitio para que se pueda escalar fácilmente (no sea difícil con las técnicas de CSS/HTML adecuadas) o simplemente permita al usuario hacer lo que quiera (tal vez ya tengan su navegador enfocado o utilicen baja resolución). Por lo general, no debes tomar decisiones de UX para las personas.
Pero es posible.
Demostración: http://jsfiddle.net/q6kebgbh/4/
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
}
Tenga en cuenta que las versiones anteriores de esta respuesta transform utilizan para apoyar a más navegadores. Sin embargo, este código abreviado parece funcionar para las versiones actuales de Chrome, FF, Safari e IE (así como las versiones anteriores de IE, que han sido compatibles con zoom durante mucho tiempo).
Muchas gracias, está funcionando bien en Firefox, Chrome, pero no funciona en el viejo explorador de Internet, pero también estoy descargando ie8 –
@DanishIqbal. Tendrá que utilizar dos métodos diferentes para admitir versiones anteriores de IE. He actualizado mi muestra para mostrar compatibilidad con todos los navegadores. –
es ocultar todo flash en este sitio –
Puede probar la regla CSS zoom. Nunca he intentado pero, en teoría, el establecimiento de una regla CSS como la siguiente podría hacer lo que quiera:
body { zoom: 2; }
Nota: esto no modifica realmente los navegadores nivel de zoom. Sólo hace que todo en la página grande :)
@jaremysawesome muchas gracias por su trabajo en Chrome, Internet Explorer, pero no en Firefox ninguna sugerencia –
@ DanishIqbal Esto funciona con FF: http://stackoverflow.com/a/12603229/694469 Utiliza '-moz-transform: scale (2) '. – KajMagnus
'-moz-transform zoom' no es lo mismo que 'zoom'. el primero rompe mi diseño de sitio web complejo que contiene elementos fijos y absolutamente posicionados.https: //www.word-party.com/ –
Prueba esto:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "300%"
}
</script>
<body onload="zoom()">
<h6>content</h6>
</body>
muchas gracias tu código está funcionando perfectamente en cromo déjame ver en otros navegadores –
no funciona Firefox y en Internet Explorer requieren permitir el script cualquier sugerencia –
Hola, Iqbal, intenta usar el cuerpo de css {zoom: 300%; } – Vinod
Esa es una respuesta a los mensajes de mente estrecha como
personalmente creo que esto es una mala idea;
o
por qué no ESTILO que fuera más grande
etc
tengo PWA que tiene un diseño minimalista con una gran cantidad de espacio en blanco y destinada a los teléfonos móviles en el primer lugar (así que inicialmente no pensé en pantallas grandes). No es solo aburrido sitio web con artículos. Es bastante complejo UI.
Así que cuando lo abres en una pantalla muy grande (televisor o monitor grande) se ve realmente feo (porque es demasiado espacio en blanco en ese punto). Y como usuario, lo necesito cada vez que lo acerco. Es bastante estúpido. Mi aplicación web es más estética y más fácil de usar desde un sofá en la televisión cuando se escala un poco en esa pantalla grande.
Entonces, qué estoy haciendo, en @media Puedo cambiar la propiedad del zoom si la pantalla es demasiado ancha. El problema que -moz-transform: scale es completamente diferente del zoom.
Así que la línea inferior si desea utilizar el zoom página web con CSS tiene tres opciones:
(recomendado, más difícil) que sacrificar algunas opciones de diseño y el uso de em y rem unidades, mientras que en desarrollo tu pagina. Eso permitirá cambiar el "zoom" de la página tan fácil como cambiar el tamaño de la fuente en el cuerpo.
(más fácil) Para usar "transformar: escala" para la experiencia de varios navegadores, pero puede que no funcione como esperaba.
(no recomendado, fácil) Para utilizar CSS "zoom" a pesar de que no es una propiedad estándar. Sacrificios Firefox. Además, tenga un pequeño comportamiento inesperado con flexboxes absolutamente posicionados.
Nota: Ya en Google sobre esto no encontrar esto o algo que solucionan este problema –
Si ** ** siempre que el sitio sea más grande, por qué no ESTILO que sea más grande? –
@TimMedora gracias por responder en realidad se requiere más tiempo para aumentar el tamaño de todas las cosas y creo que si solo aumento el nivel de zoom, es mejor agregar el código en las páginas –