更改浏览器缩放级别

Question

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

嗯，这可能吗？ 我听到了相互矛盾的报道。

Answer 1

尽管在 Firefox 中不起作用，但在 IE 和 chrome 中可以使用：

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

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

Answer 2

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

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

Answer 3

尝试一下这是否适合您。 这适用于 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 4

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

Answer 5

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

Answer 6

正如接受的答案提到的，您可以将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>

Answer 7

最简单的解决方案

要获得窗口缩放（不是CSS缩放），有一些方法，但最简单的方法如下：

(function() {
    window.addEventListener('resize', evt => {
        let zoom = (window.outerWidth / window.innerWidth).toFixed(2)
        console.log('zoom: ', zoom, '%')
    })
})();

另一种方法

另一种方法是窗口.devicePixelRatio，但它可能会显示不正确的值，具体取决于屏幕分辨率（特别是多个屏幕）。

Answer 8

browser.tabs.setZoom() 应该处理这种情况。

let zooming = browser.tabs.setZoom(
  tabId,           // optional integer
  zoomFactor       // number
)

请参阅 MDN 文档：https:// /developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/setZoom

Answer 9

<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 中不会改变缩放，只会改变比例！

Answer 10

您可以使用 Window.devicePixelRatio 和 < a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" rel="nofollow noreferrer">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>

Answer 11

您可以定位 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)。

Answer 12

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

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