更改浏览器缩放级别

我需要在我的网站上创建2个按钮来改变浏览器缩放级别(+)( – )。 我正在请求浏览器缩放,而不是css缩放,因为图像大小和布局问题。

那么,这甚至有可能吗? 我听说有冲突的报道。

我想说在大多数浏览器中是不可能的,至少不是没有一些额外的插件。 在任何情况下,我会尽量避免依赖于浏览器的缩放,因为实现方式各不相同(某些浏览器只能缩放字体,其他浏览器缩放图像等)。 除非你不关心用户体验。

如果您需要更可靠的缩放,请考虑使用JavaScript和CSS缩放页面字体和图像,或者可能在服务器端放大。 图像和布局缩放问题可以通过这种方式来解决。 当然,这需要更多的工作。

试试如果这对你有用。 这适用于FF,IE8 +和Chrome。 其他部分适用于非Firefox浏览器。 虽然这给你一个缩放效果,它实际上并没有修改浏览器级别的缩放值。

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 + '%'); } }); 

可能在IE浏览器和铬,虽然它不能在Firefox中工作:

 <script type="text/javascript"> function toggleZoomScreen() { document.body.style.zoom="80%" } </script> <img src="example.jpg" alt="example" onclick="toggleZoomScreen()"> 

你可以使用CSS3缩放功能 ,但我还没有用 jQuery测试过。 现在就试试,让你知道。 更新:测试它,工作,但很有趣

 <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> 

在IE中不可能,因为状态栏中的UI缩放按钮不可编写脚本。 YMMV为其他浏览器。

我无法找到改变实际浏览器缩放级别的方法,但是您可以使用CSS transform:scale()来获得非常接近的效果。 这里是我的基于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>