更改浏览器缩放级别-解网

问：

我需要在我的网站上创建 2 个按钮来更改浏览器缩放级别（+）（-）。由于图像大小和布局问题，我请求浏览器缩放而不是 css 缩放。

那么，这可能吗？我听说过相互矛盾的报道。

JavaScript 浏览器缩放

11赞 user57368 6/29/2009

浏览器缩放只能由用户控制，而不是由网站控制。如果网站可以更改浏览器缩放级别，则破坏了浏览器具有的最基本的可访问性功能。我认为任何允许网站更改浏览器缩放的方法都是一个严重的错误，因为任何使用该功能都是滥用。

45赞 Jourkey 6/29/2009

@unknown（谷歌），胡说八道。你大错特错了。这些控件对于在 javascript 中创建丰富的 Web 应用程序非常宝贵，这些应用程序可以达到 flash，其次，浏览器可以将缩放控件限制为仅在用户交互时可用，而不能提供完全控制。

146赞 Nathan Crause 9/27/2013

我真的厌倦了整个“你永远不应该 XYZ”。是的，在一个完美的世界里，或者当你在写一个全新的网站时，这一切都很好。但是，如果网站已经有十年的历史了，客户不会为新设计付费，而你的老板希望你让网站在平板电脑上工作，那么这种“你真的不应该”的心态可能会退居二线。如果你知道如何做某事，就说出来。如果你不这样做，那就不要发表评论。在论坛上滔滔不绝地胡说八道是无济于事的，而且实际上很粗鲁。

7赞 Olivvv 4/17/2014

旧帖子，但“你永远不应该”和“浏览器不应该允许”之间是有区别的。正是因为 Web 开发人员正在挑战极限，浏览器开发人员必须为了用户的利益而设置限制。否则，我们仍然会处于一个由自定义的彩色滚动条和摇晃窗口加载组成的网络中。

2赞 DdD 2/23/2015

老复兴但热该死的谢谢你@NathanCrause！我到了需要发布辅助功能的地步，因为有些用户也看不见，而且无法更改浏览器缩放让我的生活变得艰难。CSS Zoom 不能很好地与 jquery ui 配合使用

答：

56赞 Eemeli Kantola 6/29/2009 #1

我想说的是，在大多数浏览器中都是不可能的，至少如果没有一些额外的插件，这是不可能的。无论如何，我都会尽量避免依赖浏览器的缩放，因为实现方式各不相同（有些浏览器只缩放字体，有些浏览器也缩放图像等）。除非你不太关心用户体验。

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

0赞 Arj 1411 11/16/2021

嗨，降低应用程序渲染缩放级别怎么样？

0赞 Eemeli Kantola 11/17/2021

不确定你说的那句话是什么意思？不过，如今，CSS缩放（根据另一个答案 stackoverflow.com/a/13840578/94956）可能会在大多数情况下按预期工作，但Firefox除外。

14赞 obzenner 12/13/2011 #2

您可以使用 CSS3 缩放功能，但我还没有用 jQuery 测试过它。现在就试试，让你知道。更新：测试过，有效但很有趣

0赞 obzenner 9/20/2013

是的，完全不是。对跨浏览器有什么想法吗？更新：没必要，刚刚检查了上面的帖子！干杯

0赞 Ansjovis86 11/8/2017

似乎适用于 Chrome 和 Safari，但不适用于 Firefox。

0赞 leroyjenkinss24 12/5/2019

在iPad OS Safari中损坏

2赞 Kartik Chugh 1/28/2021

自 2021 年 1 月起可在 Chrome 中使用。可以在此处检查其他兼容性： developer.mozilla.org/en-US/docs/Web/CSS/zoom 显然不推荐，但适合快速破解

0赞 gre_gor 10/25/2022

OP 明确要求不要使用 CSS 缩放。

31赞 Vijey 9/26/2012 #3

试试这是否适合您。这适用于 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 + '%');
        }
    });

2赞 jave.web 7/3/2013

您必须具有 jquery 1.8.3 或 jQuery Migrate 插件（才能使用 $.browser）

1赞 Joel Teply 6/3/2015

为了保持一致性，在 MozTransform 的情况下，设置原点：

1赞 Hielke Walinga 5/28/2019

您现在应该能够在所有浏览器中进行设置。即使在当前版本的 Firefox 中也不存在。transform: scale(..)MozTransform

0赞 Jasper de Vries 4/29/2021

您可能需要将transform-origin: 50% 0;

0赞 gre_gor 10/25/2022

OP 明确要求不要使用 CSS 缩放。

77赞 Corne Lukken 12/12/2012 #4

在 IE 和 chrome 中可能，尽管它在 firefox 中不起作用：

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

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

16赞 kmkaplan 12/12/2012

Jourkey 明确要求非 CSS 缩放。

4赞 zrooda 5/7/2014

这只是在正文上内联更改 CSS 缩放值，这与问题所问的内容完全相反。

1赞 Michael Blankenship 6/14/2015

不要忘记，这种缩放状态可能需要在会话变量中永久保存和管理，并在每次页面加载时重播。

1赞 Vijay Chavda 11/19/2021

根据 MDN 的说法，这是非标准的，不建议在生产中使用。来源：developer.mozilla.org/en-US/docs/Web/CSS/zoom

-2赞 amini gazar 3/28/2015 #5

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

在Firefox中不会更改缩放，只会更改比例!!

4赞 John Weisz 7/14/2016

再一次，这是CSS缩放，这是问题所不希望的。

3赞 Bogdanio 4/11/2015 #6

我找不到更改实际浏览器缩放级别的方法，但您可以使用 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>

2赞 SalutonMondo 8/15/2018 #7

正如接受的答案所提到的，你可以将 DOM 中元素的 fontSize css 属性一一放大，下面的代码供大家参考。

 <script>
    var factor = 1.2;
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var style = window.getComputedStyle(all[i]);
        var fontSize = style.getPropertyValue('font-size');

        if(fontSize){
            all[i].style.fontSize=(parseFloat(fontSize)*factor)+"px";
        }
        if(all[i].nodeName === "IMG"){
            var width=style.getPropertyValue('width');
            var height=style.getPropertyValue('height');
            all[i].style.height = (parseFloat(height)*factor)+"px";
            all[i].style.width = (parseFloat(width)*factor)+"px";
        }
    }
</script>

-2赞 Exodus 4D 9/2/2021 #8

您可以使用 Window.devicePixelRatio 和 Window.matchMedia（）

const onChange = e => {
  const pr = window.devicePixelRatio;
  const media = `(resolution: ${pr}dppx)`;
  const mql = matchMedia(media);

  const prString = (pr * 100).toFixed(0);
  const textContent = `${prString}% (${pr.toFixed(2)})`;

  console.log(textContent);
  document.getElementById('out').append(
    Object.assign(document.createElement('li'), {textContent})
  )

  mql.addEventListener('change', onChange, {once: true});
};

document.getElementById('checkZoom').addEventListener('click', e => onChange());

onChange();

<button id="checkZoom">get Zoom</button>
<ul id="out"></ul>

0赞 gre_gor 10/25/2022

问题是如何改变它，而不是检测它。

-2赞 thao 10/22/2021 #9

您可以定位 CSS 的哪个部分缩小和缩小，或整个 document.body.style.zoom

您可以设置最大和最小缩放级别。这意味着，对按钮（+）或（-）的更多点击不会放大或缩小更多。

var zoomingTarget = document.querySelector('.zooming-target')
var zoomInTool = document.getElementById('zoom-in');
var zoomOutTool = document.getElementById('zoom-out');

let zoomIndex = 0;

function zooming () {
    if (zoomIndex > 2) {
        zoomIndex = 2
    } else if (zoomIndex < -2) {
        zoomIndex = -2
    }
    zoomingTarget.style.zoom = "calc(100% + " + zoomIndex*10 + "%)";
}

现在使按钮（+）和（-）工作。

zoomInTool.addEventListener('click', () => {
    zoomIndex++;
    if(zoomIndex == 0) {
        console.log('zoom level is 100%')
    }
    zooming();
})

zoomOutTool.addEventListener('click', () => {
    zoomIndex--
    if(zoomIndex == 0) {
        console.log('zoom level is 100%')
    }
    zooming();
})

由于 style.zoom 在 Firefox 上不起作用，因此请考虑使用 style.transform = scale（x，y）。

0赞 gre_gor 10/25/2022

OP 明确要求不要使用 CSS 缩放。

-2赞 Basavaraj SK 9/19/2022 #10

我通过下面的代码修复了。

HTML格式：

<div class="mt-5"
        [ngStyle]="getStyles()">

TS：

getStyles() {
        const screenWidth = screen.width;
        const windowWidth = window.innerWidth;
        if (windowWidth != screenWidth) {
            const percentDifference = Math.ceil((screenWidth / windowWidth) * 100);
            if (percentDifference > 100) {
                this.bannerBackgroundImageSize = '20%, 74%';
            } else if (percentDifference === 100) {
                this.bannerBackgroundImageSize = '20%, 72%';
            } else if (percentDifference >= 90 && percentDifference <= 99) {
                this.bannerBackgroundImageSize = '25%, 70%';
            } else if (percentDifference >= 80 && percentDifference <= 89) {
                this.bannerBackgroundImageSize = '28%, 68%';
            } else if (percentDifference >= 75 && percentDifference <= 79) {
                this.bannerBackgroundImageSize = '29%, 67%';
            } else if (percentDifference >= 67 && percentDifference <= 74) {
                this.bannerBackgroundImageSize = '30%, 65%';
            } else if (percentDifference >= 50 && percentDifference <= 66) {
                this.bannerBackgroundImageSize = '30%, 61%';
            } else if (percentDifference < 50) {
                this.bannerBackgroundImageSize = '30%, 58%';
            }
        } else {
            this.bannerBackgroundImageSize = '20%, 72%';
        }
        const myStyles = {
            'background-size': this.bannerBackgroundImageSize,
        };
        return myStyles;
    }

我希望这适用于所有缩放级别，并且可以考虑所有样式。

有用的链接：

https://css-tricks.com/can-javascript-detect-the-browsers-zoom-level/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

0赞 gre_gor 10/25/2022

这只会更改背景，而不会更改页面。

上一个：如何在 html 中嵌入 mp4 视频以在树莓派的 chromium 中查看？

下一个：在 Javascript 中，使用鼠标垫时如何在基于 Firefox 和 Chromium 的浏览器上实现类似的放大/缩小行为？