javascript - Cambiar el nivel de zoom del navegador

browser

Question

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 al tamaño de la imagen y problemas de diseño.

Bueno, ¿esto es posible? He escuchado informes contradictorios.

Answer 1

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

Answer 2

No pude encontrar una manera de cambiar el nivel real de zoom del navegador, pero puede acercarse bastante con la transformación CSS: 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>

Answer 3

Prueba si esto funciona para ti. Esto funciona en FF, IE8 + y Chrome. La parte else se aplica a navegadores que no sean Firefox. Aunque esto le da un efecto de zoom, en realidad no modifica el valor del zoom en el 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 + ''%'');
        }
    });

Answer 4

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: lo probé, funciona pero es divertido

Answer 5

posible en IE y Chrome, aunque no funciona en Firefox:

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

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

Answer 6

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 amplían las imágenes, etc.). A menos que no te importe mucho la experiencia del usuario.

Si necesita un zoom más confiable, considere ampliar las fuentes y las imágenes de la página con JavaScript y CSS, o posiblemente en el lado del servidor. Los problemas de escalado de la imagen y el diseño podrían abordarse de esta manera. Por supuesto, esto requiere un poco más de trabajo.

Answer 7

<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á la escala de cambio solo de zoom !!!