javascript - Cambiar el nivel de zoom del navegador
browser (7)
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.
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.
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>
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 + ''%'');
}
});
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
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()">
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.
<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 !!!