Cambiar el nivel de zoom del navegador


104

Necesito crear 2 botones en mi sitio que cambiarían el nivel de zoom del navegador (+) (-). Estoy solicitando el zoom del navegador y no el zoom css debido a problemas de tamaño y diseño de la imagen.

Bueno, ¿es esto posible? Escuché informes contradictorios.


8
El zoom del navegador es algo que solo debe controlar el usuario, nunca el sitio web. Si el sitio web puede alterar el nivel de zoom del navegador, eso rompe la característica de accesibilidad más básica que tienen los navegadores. Consideraría que cualquier método para permitir que un sitio web cambie el zoom del navegador es un error grave, porque cualquier uso de esa función sería un abuso.
user57368

37
@unknown (google), tonterías. Estás muy equivocado. Dichos controles son invaluables para crear aplicaciones web ricas en javascript que pueden estar a la altura de flash y, en segundo lugar, los navegadores pueden limitar los controles de zoom para que estén disponibles solo con la interacción del usuario y no brinden un control total.
Jourkey

101
Realmente me canso de todo el "nunca deberías XYZ". Sí, eso está muy bien en un mundo perfecto, o cuando estás escribiendo un sitio nuevo. Pero si el sitio tiene una década, el cliente no pagará por un nuevo diseño y sus jefes esperan que usted haga que un sitio funcione en una tableta, ese tipo de mentalidad de "realmente no debería" puede dar un vuelco -asiento. Si sabe cómo hacer algo, dígalo. Si no lo hace, no comente. Entrar en foros diciendo tonterías pedantes es inútil y, en realidad, bastante grosero.
Nathan Crause

5
publicación anterior, pero hay una diferencia entre "nunca debería" y "el navegador no debería permitir". Es precisamente porque los desarrolladores web están superando los límites, que los desarrolladores de navegadores tienen que poner límites, por el bien de los usuarios. De lo contrario, todavía estaríamos en una red de barras de desplazamiento coloridas personalizadas y carga de agitar la ventana.
Olivvv

1
Viejo revivir pero maldita sea gracias @NathanCrause! Estoy llegando al punto en el que necesito liberar la funcionalidad de Accesibilidad, ya que algunos usuarios tampoco pueden ver, y no poder cambiar el zoom del navegador me está complicando la vida. CSS Zoom simplemente no funciona bien con jquery ui
DdD

Respuestas:


40

Yo diría que no es posible en la mayoría de los navegadores, al menos no sin algunos complementos adicionales. Y en cualquier caso, trataría de evitar depender del zoom del navegador, ya que las implementaciones varían (algunos navegadores solo hacen zoom en las fuentes, otros en las imágenes, también, etc.). A menos que no le importe mucho la experiencia del usuario.

Si necesita un zoom más confiable, considere hacer zoom en las fuentes e imágenes de la página con JavaScript y CSS, o posiblemente en el lado del servidor. Los problemas de escala de la imagen y el diseño se pueden solucionar de esta manera. Por supuesto, esto requiere un poco más de trabajo.


31

Posible en IE y Chrome aunque no funciona en Firefox:

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">

9
Jourkey solicitó explícitamente un zoom sin CSS.
kmkaplan

3
Esto es solo cambiar el valor de zoom de CSS en línea en el cuerpo, lo que hace exactamente lo contrario de lo que se preguntó en la pregunta.
mystrdat

No olvide que es probable que este estado de zoom deba guardarse y administrarse de forma persistente en una variable de sesión y reproducirse en cada carga de página.
Michael Blankenship

29

Pruebe si esto funciona para usted. Esto funciona en FF, IE8 + y chrome. La otra parte se aplica a los navegadores que no son Firefox. Aunque esto le brinda un efecto de zoom, en realidad no modifica el valor de zoom a nivel del navegador.

    var currFFZoom = 1;
    var currIEZoom = 100;

    $('#plusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom += step; 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');
        } else {
            var step = 2;
            currIEZoom += step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

    $('#minusBtn').on('click',function(){
        if ($.browser.mozilla){
            var step = 0.02;
            currFFZoom -= step;                 
            $('body').css('MozTransform','scale(' + currFFZoom + ')');

        } else {
            var step = 2;
            currIEZoom -= step;
            $('body').css('zoom', ' ' + currIEZoom + '%');
        }
    });

1
debe tener jquery 1.8.3 o jquery migrate plugin (para usar $ .browser)
jave.web

24
Esto es acercamiento CSS
HelloWorld

Para mayor coherencia, en el caso de MozTransform, establezca el origen:
Joel Teply

Hoy en día, debería poder configurarlo transform: scale(..)en todos los navegadores. MozTransformno existe ni siquiera en las versiones actuales de Firefox.
Hielke Walinga

10

Puede usar la función de zoom CSS3 , pero aún no la he probado con jQuery. Lo intentaré ahora y te lo haré saber. ACTUALIZACIÓN: probado, funciona pero es divertido


sí, totalmente no. ¿Alguna idea para varios navegadores? ACTUALIZACIÓN: no es necesario, ¡solo revisa la publicación de arriba! saludos
obzenner

Parece funcionar en Chrome y Safari, pero no en Firefox.
Ansjovis86

Roto en iPad OS Safari
leroyjenkinss24 de

2

No pude encontrar una manera de cambiar el nivel de zoom real del navegador, pero puedes acercarte bastante con CSS transform: scale (). Aquí está mi solución basada en JavaScript y jQuery:

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

<script>
    jQuery(document).ready(function($)
    {
        // Set initial zoom level
        var zoom_level=100;

        // Click events
        $('#zoom_in').click(function() { zoom_page(10, $(this)) });
        $('#zoom_out').click(function() { zoom_page(-10, $(this)) });
        $('#zoom_reset').click(function() { zoom_page(0, $(this)) });

        // Zoom function
        function zoom_page(step, trigger)
        {
            // Zoom just to steps in or out
            if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

            // Set / reset zoom
            if(step==0) zoom_level=100;
            else zoom_level=zoom_level+step;

            // Set page zoom via CSS
            $('body').css({
                transform: 'scale('+(zoom_level/100)+')', // set zoom
                transformOrigin: '50% 0' // set transform scale base
            });

            // Adjust page to zoom width
            if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
            else $('body').css({ width: '100%' });

            // Activate / deaktivate trigger (use CSS to make them look different)
            if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
            else trigger.parents('ul').find('.disabled').removeClass('disabled');
            if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
            else $('#zoom_reset').addClass('disabled');
        }
    });
</script>

2

como se menciona la respuesta aceptada, puede ampliar el atributo css fontSize del elemento en DOM uno por uno, el siguiente código para su referencia.

 <script>
    var factor = 1.2;
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var style = window.getComputedStyle(all[i]);
        var fontSize = style.getPropertyValue('font-size');

        if(fontSize){
            all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
        }
        if(all[i].nodeName === "IMG"){
            var width=style.getPropertyValue('width');
            var height=style.getPropertyValue('height');
            all[i].style.height = (parseFloat(height)*factor)+"px";
            all[i].style.width = (parseFloat(width)*factor)+"px";
        }
    }
</script>

1

No es posible en IE, ya que el botón UI Zoom en la barra de estado no es programable. YMMV para otros navegadores.


es posible en IE window.parent.document.body.style.zoom = 1.5;
Mustafa Ekici

8
El póster original pide específicamente "no zoom CSS".
i_am_jorf

0

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        var currFFZoom = 1;
        var currIEZoom = 100;

        function plus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom += step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom += stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');

        };
        function minus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom -= step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom -= stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');
        };
    </script>
    </head>
<body>
<!--zoom controls-->
                        <a id="minusBtn" onclick="minus()">------</a>
                        <a id="plusBtn" onclick="plus()">++++++</a>
  </body>
</html>

en Firefox no cambiará el zoom solo cambiará la escala !!!


3
Una vez más, este es el zoom CSS , que no es deseable por la pregunta.
John Weisz
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.