使用JavaScript模拟浏览器缩放

Question

如何使用JavaScript缩小整个文档？

我的目标是模仿内置浏览器缩放功能，将整个文档缩小到90％。

我已经尝试过使用：

document.body.zoom

这只适用于 explorer，而且页面会很乱（许多元素会移动）。

有没有一种方法可以解决这个问题？

- lior r

Answer 1

这里有：

使用：

document.body.style.zoom=1.0;this.blur();

1.0 表示 100%

150% 将会是 1.5 1000% 将会是 10.0

this.blur() 意味着光标(你可能选择了一个输入框)失去了每个选择项的焦点。

或者:

您可以使用 CSS3 元素 zoom (来源)

Firefox 不允许通过浏览器缩放，因为您无法通过 JavaScript 或其它方法来访问用户属性。

所以，您可以使用一些 CSS 样式来允许缩放(CSS3: zoom，如上所述)或增加文本大小！您可以通过包含不同的 CSS 文件来实现这一点。但是，这里有一个“跳跃”的问题，因为样式化的 CSS 元素（浮动等）在其属性方面必须“交互”方式不同。

我上面贴出的缩放功能在 Chrome 和 IE8+ 中运行良好 (如上所述，FF 不支持)

--

附加信息：

此处是一个确切的使用缩放选项进行缩放的示例。

示例应用程序可以在此处找到。

缩放选项通常处理缩放，就像您的浏览器一样！

但这仍然是 FF 不支持，或者 Safari 和 Opera 不支持的所有东西。在 Chrome 和 IE 中可以工作！

另一个解决方案是：将主要大小放置在“em”中，然后通过设置诸如 100%、110%(所有 CSS) 的大小来解决。因此，您可以有不同的 CSS 文件，并且只需替换 % 属性即可！

但我认为可能没有其他解决方案！:(

- creativeby

---

虽然这理论上回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - Lix

谢谢，虽然您的解决方案有效，但它并不能模拟由ctrl+或ctrl-引起的确切操作。CSS缩放功能会破坏某些页面结构（特别是在处理margin:auto时），而ctrl+-则不会...还有其他方法可以做到这一点吗？ - lior r

修改了我的帖子！我希望我理解了你的要求？ :) （但是你仍然有一个问题，即Firefox / Safari？/ Opera？不支持缩放！） - creativeby

Answer 2

这里是使用CSS transform: scale()和JavaScript / jQuery的解决方案：

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

- Bogdanio

---

这很好，唯一的问题是我想要页面放大和缩小，但然后刷新以占据整个屏幕，就像您在浏览器中手动缩放时所做的那样。 在这种情况下，对于我来说，它只会将主体放大和缩小到大小。 我希望页面保持相同的大小，但仅增加或减小其中包含的项目的大小。 - b3labs

Answer 3

尝试使用transform: scale()。 请参考Mozilla文档。

.className {
    transform: scale(0.9)
}

您可以使用Javascript更改比例尺的数量。

let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`

scale()函数可以缩小或增大元素的宽度和高度。如果你希望宽度保持不变，同时缩放所有内部元素，则算法如下：

let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
document.body.style.width = `${100 * (1 / scaleAmount)}%`
document.body.style['transform-origin'] = `0 0`

如果你使用像React这样的UI框架，你可以将scaleAmount作为状态传递给内联CSS。

<header className="App-header" style ={{
    transform: `scale(${scaleState})`,
    transformOrigin: '0 0',
    width: `${100 * (1 / scaleState)}%`
}}>

React示例

- Edson A

Answer 4

我用jquery实现了这个功能，在Firefox、Safari、Chrome和IE9+中都可以使用：

window.onload = function() {
  var currFFZoom = 1;
  var currIEZoom = 100;

  $('#In').on('click', function() {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
      var step = 0.02;
      currFFZoom += step;
      $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
    } else {
      var step = 2;
      currIEZoom += step;
      $('body').css('zoom', ' ' + currIEZoom + '%');
    }
  });

  $('#Out').on('click', function() {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
      var step = 0.02;
      currFFZoom -= step;
      $('body').css('MozTransform', 'scale(' + currFFZoom + ')');

    } else {
      var step = 2;
      currIEZoom -= step;
      $('body').css('zoom', ' ' + currIEZoom + '%');
    }
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" id="Out" value="Zoom Out"/>
<input type="button" id="In" value="Zoom In"/>

- Rafael González

Answer 5

你可以做以下的事情：

document.body.style.zoom = "120%"

- Kaiser Konok

Answer 6

你需要在顶层元素（html）的样式中设置缩放属性。 现在有趣的部分是如何计算它。这就是我所做的。 你可以将这段代码放在window.onresize函数中，以使整个页面自动缩放。

window.onresize = function(){
    let zoom = Number((window.innerWidth / window.screen.width).toFixed(3));
    document.firstElementChild.style.zoom = zoom;
  }

这将计算当前窗口宽度与实际设备宽度的比率。

然后将该值设置为顶级html元素的缩放属性。 可以使用document.firstElementChild访问顶级html元素。

将主包装器div的高度设置为100％，以防止缩放时出现白色空间。

- Ronn Wilder