javascript 缩放身体浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18847432/
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
Zoom body browser
提问by titi
I would add my site buttons A + and A-to zoom. I wish that all the body is grossise So I created this code
我会添加我的网站按钮 A + 和 A- 来缩放。我希望所有的身体都是粗糙的所以我创建了这个代码
<html>
<body>
<style>
.container{width: 800px;background: #000;}
p{color:#fff;}
a { color: #FFCC00;}
</style>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
<script type="text/javascript">
function ZoomScreen100() {
document.body.style.zoom="100%"
}
function ZoomScreen200() {
document.body.style.zoom="200%"
}
function ZoomScreen300() {
document.body.style.zoom="300%"
}
function ZoomScreen400() {
document.body.style.zoom="400%"
document.body.style.zoom="400%"
}
</script>
<a href="#" onclick="ZoomScreen100()">A+</a>
<a href="#" onclick="ZoomScreen200()">A+</a>
<a href="#" onclick="ZoomScreen300()">A+</a>
<a href="#" onclick="ZoomScreen400()">A+</a>
</body>
It works on Chrome, Internet Explorer, Safari but not on Firefox and Opera. Why?
它适用于 Chrome、Internet Explorer、Safari，但不适用于 Firefox 和 Opera。为什么？
回答by Pavlo
zoomis a non-standard property that has not been implemented by Firefox, the closest cross-browser property is transform(demo):
zoom是Firefox 未实现的非标准属性，最接近的跨浏览器属性是transform( demo)：
document.body.style.transform = 'scale(2)';
The effect, however, will be different from applying zoom: parent context (e.g. width, height) will not be updated. If that's your intent, you may want to consider using calc()and a multiplier on selected properties:
然而，效果将与应用不同zoom：父上下文（例如宽度、高度）不会更新。如果这是您的意图，您可能需要考虑calc()在所选属性上使用和乘数：
document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;
回答by user1329482
Have a look at http://www.browsersupport.net/CSS/zoom. I wasn't able to make it work (generally) in Firefox or Opera, and the most straightforward explanation is that those browsers haven't implemented support for it. (Firefox 23.0.1 passed one of the tests at the linked site; Opera 12.16 passed neither.)
看看http://www.browsersupport.net/CSS/zoom。我无法（通常）在 Firefox 或 Opera 中使其工作，最直接的解释是这些浏览器尚未实现对它的支持。（Firefox 23.0.1 通过了链接站点的一项测试；Opera 12.16 都没有通过。）
It's not what you wrote--it's that the browsers you mention aren't ready for it yet. (Not surprising--even though you'll find site that tell you zoom is in the spec, I can't find it listed anywhere in the actual w3c documents. Maybe after more caffeine....)
这不是你写的——而是你提到的浏览器还没有准备好。（并不奇怪——即使你会发现网站告诉你缩放在规范中，我在实际的 w3c 文档中找不到它列出的任何地方。也许在更多的咖啡因之后......）
That being said, remember that a compliant page will have a element and that's where the styles go. I assume this was a quick dash-off and you forgot the head element. :)
话虽如此，请记住，合规页面将有一个元素，这就是样式所在的位置。我认为这是一个快速的冲刺，你忘记了头部元素。:)
