25

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

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

我试过使用

document.body.zoom

这仅适用explorer于页面变得混乱（很多元素正在移动）。

有没有办法做到这一点？

4

6 回答 6

31

你去：

利用：

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

1.0 表示 100%

150% 将是 1.5 1000% 将是 10.0

this.blur() 意味着光标，也许你选择了一个输入字段，失去了每个选择项的焦点。

或者：

您可以使用 css3 元素缩放（Source）

Firefox 不允许使用浏览器进行缩放，因为您无法通过 javascript 或 sth 访问用户属性。

因此，您可以只使用一些允许缩放（CSS3：缩放，如上所述）或增加文本大小的 CSS 样式！例如，您可以通过包含不同的 CSS 文件来做到这一点。但是在这里你有“跳跃”的问题，因为样式化的 css 元素（浮动等）必须“交互”，实际上它们的属性不同。

我在上面发布的缩放在 Chrome 和 IE8+ 中运行良好（如上所述不支持 FF）

- 附加信息：

这是一个关于如何使用缩放选项精确缩放的示例。示例应用程序可以在这里找到

缩放选项通常会像浏览器一样处理缩放！

但这仍然是 Firefox 或 Safari 和 Opera 不支持的东西？在 chrome 和 IE 中它可以工作！

另一种解决方案是：将您的主要尺寸放在“em”中，然后通过设置尺寸（如 100%、110%（在整个 css 中））来解决问题。所以你可能有不同的 CSS 文件，并且“只是”需要替换 % 属性！

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

于 2012-05-05T17:04:47.903 回答
4

这是我使用 CSS 转换的解决方案：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>

于 2015-04-11T15:36:55.280 回答
4

尝试使用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 中的示例

于 2019-12-19T16:24:48.627 回答
1

我是用 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"/>

于 2013-03-19T01:17:37.220 回答
0

您可以执行以下操作：

document.body.style.zoom = "120%"
于 2021-12-05T17:38:38.160 回答
0

您必须为顶级元素 (html) 设置样式中的缩放属性。现在有趣的部分是如何计算它。这就是我所做的。您可以将此代码放在 window.onresize 函数中以使整个页面自动缩放。

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

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

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

将主包装 div 的高度设置为 100% 以防止缩放时出现空白。

于 2021-10-13T18:24:55.340 回答