更改浏览器缩放级别
我需要在我的网站上创建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>
