使用JavaScript模仿浏览器缩放

时间:2012-05-05 17:00:30

标签: javascript zoom

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

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

我尝试过使用

document.body.zoom

这只适用于explorer,页面变得混乱(很多元素都在移动)。

有办法做到这一点吗?

4 个答案:

答案 0 :(得分:18)

There you go:

使用:

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

1.0表示100%

150%将是1.5 1000%将是10.0

this.blur()表示光标,也许你选择了一个输入字段,丢失了每个选择项的焦点。

或:

您可以使用css3元素zoomSource

Firefox does not allow使用浏览器进行缩放,因为您无法通过javascript或sth访问用户属性。

所以你可以使用一些允许缩放的CSS样式(CSS3:zoom,如上所述)或增加文本大小!例如,您可以使用包含不同的CSS文件。但是在这里你有“跳跃”的问题,因为风格化的css元素(浮动等)必须在其属性的事实上“交互”不同。

我上面发布的缩放版适用于Chrome和IE8 +(如上所述不支持FF)

- 其他信息:

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

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

但这仍然是所有东西,Firefox不支持,或者Safari&歌剧?在Chrome和IE中它可以工作!

另一种解决方案是:将您的主要尺寸放在“em”中,然后通过设置100%,110%(遍布整个css)的尺寸来解决。所以你可能有不同的CSS文件,“只是”需要替换%属性!

但我不认为可能有其他解决方案! :(

答案 1 :(得分:3)

以下是我使用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>

答案 2 :(得分: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"/>

答案 3 :(得分:0)

尝试使用transform: scale()Mozilla Docs

.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 / newScale)}%`
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)}%`
}}>

Example in React