触发浏览器放大和缩小功能 [英] triggering browser Zoom-in and Zoom-out functions

问题描述

是否可以通过JavaScript触发浏览器的放大和缩小功能？

Is it possible to trigger Browser's zoom-in and zoom-out function through JavaScript?

我想添加放大（+）和缩小（ - ）我网站上的按钮，通过点击按钮想要调用浏览器的放大（可以通过按ctrl和+调用/缩小（ctrl和 - ）函数来调用。）

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.

推荐答案

我不相信有一种基于标准的方法来做到这一点。某些浏览器可能会提供自己的API来执行此操作，但我很怀疑。

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.

据说我过去通过一些CSS技巧完成了这个效果。基本上在CSS中定义em中的每个度量（宽度，高度，边距，填充，字体大小等）而不是px。这实际上使一切的大小取决于文档的默认字体大小。然后进行缩放，您可以更改正文标记的字体大小，使其更小或更大。如果你仔细地这样做，效果看起来就像用户使用浏览器缩放一样。

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重置样式表将1em设置为10px。这样，如果你想要一个宽度为200px的div，你只需将它设置为20em。您可以通过在CSS重置样式表中将body font-size设置为62.5％来完成此操作。由于大多数浏览器的默认字体大小为16px，因此1em = 16px，10px为62.5％。

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%.

我希望这会有所帮助，这要做很多工作是的，但是在使用HTML和CSS时，使用em而不是px帮助了我。

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.

这篇关于触发浏览器放大和缩小功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！