更改浏览器缩放级别

Question

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

嗯,这有可能吗？我听说过相互矛盾的报道.

Answer 1

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

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

Answer 2

试试这是否适合您.这适用于FF,IE8 +和chrome.else部分适用于非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 + '%');
        }
    });

Answer 3

可能在IE和Chrome中虽然它在firefox中不起作用:

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

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

Answer 4

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