imitar el zoom del navegador con JavaScript

Question

¿Cómo es posible alejar un documento completo con JavaScript?

Mi objetivo es imitar el zoom del navegador incorporado y acercar todo el documento al 90%.

He intentado usar

document.body.zoom 

Esto sólo funciona con explorer y la página se complica (una gran cantidad de elementos se mueven alrededor).

¿Hay alguna manera de hacerlo?

Answer 1

There you go:

Uso:

document.body.style.zoom=1.0;this.blur(); 

1,0 significa 100%

150% sería 1,5 1,000% sería 10,0

this.blur() significa que el cursor , tal vez haya seleccionado un campo de entrada, pierde el foco de cada elemento seleccionado.

o:

Usted puede utilizar el elemento CSS3 zoom (Source)

Firefox does not allow zoom con el navegador porque no se puede acceder a las propiedades de usuario a través de javascript o algo.

Así que puedes usar algunos estilos CSS que permiten hacer zoom (CSS3: zoom, como se mencionó anteriormente) o aumentar el tamaño del texto! Que podría hacer con incluir un archivo CSS diferente, por ejemplo. Pero aquí tienes el problema "saltarín", porque los elementos css con estilo (flotantes, etc.) tienen que "interactuar" de forma diferente a sus atributos.

El zoom he publicado anteriormente funciona bien en Chrome y IE8 + (FF no soportado como se mencionó)

- Información adicional:

Here es un ejemplo de cómo enfocar exactamente con la opción de zoom. Ejemplo de aplicación se puede encontrar here

¡La opción de zoom normalmente maneja el zoom como lo hace su navegador!

Pero esto sigue siendo todo lo que no es compatible con Firefox, o tal vez Safari & Opera? ¡En Chrome e IE funciona!

Otra solución sería: coloque sus tamaños principales en "em", y luego alrededor configurando tamaños como 100%, 110% (en todo el CSS). ¡Así que podrías tener diferentes archivos CSS, y "solo" necesitas reemplazar los% atributos!

¡Sin embargo, no creo que haya otras soluciones!:(

Answer 2

Hice esto con jQuery, funciona con Firefox, Safari, Chrome e IE9 +:

window.onload = function() { 
var currFFZoom = 1; 
var currIEZoom = 100; 

$('#In').on('click',function(){ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox 
     var step = 0.02; 
     currFFZoom += step; 
     $('body').css('MozTransform','scale(' + currFFZoom + ')'); 
    } else { 
     var step = 2; 
     currIEZoom += step; 
     $('body').css('zoom', ' ' + currIEZoom + '%'); 
    } 
}); 

$('#Out').on('click',function(){ 
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox 
     var step = 0.02; 
     currFFZoom -= step;     
     $('body').css('MozTransform','scale(' + currFFZoom + ')'); 

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


<input type="button" id="Out" alt="Zoom Out"/> 
<input type="button" id="In" alt="Zoom In"/> 

Answer 3

Aquí está mi solución utilizando la transformada CSS: scale() y JavaScript/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>