用 JavaScript 模拟浏览器缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10464038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
imitate browser zoom with JavaScript
提问by lior r
How is it possible to zoom out an entire document with JavaScript ?
如何使用 JavaScript 缩小整个文档？
My goal is to imitate the built-in browser zoom and zoom the entire document to 90%.
我的目标是模仿内置的浏览器缩放，将整个文档缩放到 90%。
I have tried using
我试过使用
document.body.zoom
This works only with explorerand the page gets messy (a lot of elements are moving around).
这仅适用explorer于页面变得混乱（许多元素正在移动）。
Is there a way to do this?
有没有办法做到这一点？
回答by creativeby
Use:
用：
document.body.style.zoom=1.0;this.blur();
1.0 means 100%
1.0 表示 100%
150% would be 1.5 1000% would be 10.0
150% 为 1.5 1000% 为 10.0
this.blur() means that the curser, maybe you selected an input field, looses focus of every select item.
this.blur() 意味着光标，也许你选择了一个输入字段，失去了每个选择项的焦点。
or:
或者：
You can use the css3 element zoom(Source)
Firefox does not allowzooming with the browser because you can't access the user properties via javascript or sth.
Firefox 不允许使用浏览器进行缩放，因为您无法通过 javascript 或 sth 访问用户属性。
So you can just use some CSS styles which allow to zoom (CSS3: zoom, as mentioned above) or to increase the text size! Which you could do with including a different CSS file for example. But here you have the "jumpy" problem, because the styled css elements (floated etc.) have to "interact" different in fact of their attributes.
所以你可以只使用一些允许缩放的 CSS 样式（CSS3：缩放，如上所述）或增加文本大小！例如，您可以通过包含不同的 CSS 文件来实现。但是在这里你有“跳跃”的问题，因为样式化的 css 元素（浮动等）必须“交互”，实际上它们的属性不同。
The zoom I posted above works well in Chrome and IE8+ (FF not supported as mentioned)
我上面发布的缩放在 Chrome 和 IE8+ 中运行良好（如前所述，不支持 FF）
-- Additional information:
- 附加信息：
Hereis an example on how to zoom exactly with the zoom option. Example application can be found here
这是有关如何使用缩放选项精确缩放的示例。示例应用程序可以在这里找到
The zoom option normally handles the zoom as your browser does!
缩放选项通常像浏览器一样处理缩放！
But this is still all stuff, which is not supported by Firefox, or maybe Safari & Opera? In chrome and IE it works!
但这仍然是所有东西，Firefox 不支持，或者 Safari 和 Opera 不支持？在 chrome 和 IE 中它有效！
Another solution would be: Place your main sizes in "em", and then work around by setting sizes like 100%, 110% (all over the css). So you could have differen CSS files, and "just" need to replace the % attributes!
另一种解决方案是：将您的主要尺寸放在“em”中，然后通过设置像 100%、110%（整个 css）这样的尺寸来解决。所以你可以有不同的 CSS 文件，并且“只”需要替换 % 属性！
Yet I don't think there might be other solutions! :(
但我认为可能没有其他解决方案！:(
回答by Bogdanio
Here is my solution using CSS transform: scale() and JavaScript / jQuery:
这是我使用 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>回答by Rafael González
I did this with jquery, works with Firefox, Safari, Chrome and IE9+:
我用 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"/>回答by Edson A
Try using transform: scale(). Mozilla Docs
尝试使用transform: scale(). Mozilla 文档
.className {
transform: scale(0.9)
}
You can change the scale amount with Javascript.
您可以使用 Javascript 更改比例量。
let scaleAmount = 1 - 0.1
document.body.style.transform = `scale(${scaleAmount})`
scale()reduces or increases the width and height of an element. If you'd like the width to remain the original size, while all inner elements scale, the algorithm looks something like this:
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`
If you use a UI framework like React, you can pass the scaleAmount as it exists in the state to inline CSS.
如果您使用像 React 这样的 UI 框架，则可以将状态中存在的 scaleAmount 传递给内联 CSS。
<header className="App-header" style ={{
transform: `scale(${scaleState})`,
transformOrigin: '0 0',
width: `${100 * (1 / scaleState)}%`
}}>
