Javascript 触发浏览器放大和缩小功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4539955/
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
triggering browser Zoom-in and Zoom-out functions
提问by user160820
Is it possible to trigger Browser's zoom-in and zoom-out function through JavaScript?
是否可以通过JavaScript触发浏览器的放大缩小功能？
I want to add Zoom-In(+) and Zoom-Out(-) buttons in my website, and by clicking on the button want to call browser's zoom-in (which can be called by pressing ctrl and +) / zoom-out (ctrl and -) function.
我想在我的网站中添加 Zoom-In(+) 和 Zoom-Out(-) 按钮，并通过点击按钮来调用浏览器的放大（可以通过按 ctrl 和 + 调用）/缩小(ctrl 和 -) 功能。
回答by macinjosh
I do not believe there is a standards based way to do this. Certain browsers may offer their own API to do this but I am doubtful.
我不相信有一种基于标准的方法来做到这一点。某些浏览器可能会提供自己的 API 来执行此操作，但我对此表示怀疑。
That being said I have accomplished this effect in the past through some CSS trickery. Essentially in your CSS define every measurement (width, height, margin, padding, font-size, etc.) in em instead of px. This essentially makes the size of everything dependent on the default font size of the document. Then to zoom you change the font-size of the body tag to make things smaller or larger. If you do this carefully the effect will look the same as if the user zoomed using their browser.
话虽如此，我过去已经通过一些 CSS 技巧实现了这种效果。本质上，在您的 CSS 中定义每个度量（宽度、高度、边距、填充、字体大小等），而不是 px。这实质上使所有内容的大小都依赖于文档的默认字体大小。然后要缩放，您可以更改 body 标签的字体大小，使内容变小或变大。如果您小心地执行此操作，效果将与用户使用浏览器进行缩放一样。
To make life easier when doing this I like to use a CSS reset stylesheet that sets 1em to be 10px. That way if you want a div to be 200px wide you just set it to be 20em. You can accomplish this by setting the body font-size to 62.5% in your CSS reset stylesheet. Since most browsers have a default font size of 16px and therefore 1em=16px, 10px is 62.5%.
为了让生活更轻松，我喜欢使用 CSS 重置样式表，将 1em 设置为 10px。这样，如果您希望 div 为 200px 宽，您只需将其设置为 20em。您可以通过在 CSS 重置样式表中将正文字体大小设置为 62.5% 来实现此目的。由于大多数浏览器的默认字体大小为 16px，因此 1em=16px，10px 为 62.5%。
I hope this helps, it is a lot of work to do it right, but using em instead of px has helped me in countless ways when working with HTML and CSS.
我希望这会有所帮助，要做到这一点需要做很多工作，但是在使用 HTML 和 CSS 时，使用 em 而不是 px 在无数方面帮助了我。
回答by Gajit
Think this was already answered with
认为这已经回答了
window.parent.document.body.style.zoom = 1.5;
回答by T.J. Crowder
I don't believe you can. On IE you could simulate it with the zoomCSS property, but that's non-standard and so support outside IE will vary.
我不相信你可以。在 IE 上，您可以使用zoomCSS 属性模拟它，但这是非标准的，因此 IE 之外的支持会有所不同。
