使用JavaScript模仿浏览器缩放 [英] imitate browser zoom with JavaScript
问题描述
如何用JavaScript缩小整个文档？
How is it possible to zoom out an entire document with JavaScript ?
我的目标是模仿内置的浏览器缩放并将整个文档缩放到90％ 。
My goal is to imitate the built-in browser zoom and zoom the entire document to 90%.
我尝试过使用
document.body.zoom
这仅适用于 explorer 并且页面获取凌乱（许多元素都在四处走动）。
This works only with explorer and the page gets messy (a lot of elements are moving around).
有没有办法做到这一点？
Is there a way to do this?
推荐答案
使用：
document.body.style.zoom=1.0;this.blur();
1.0表示100％
150％将是1.5
1000％将是10.0
150% would be 1.5 1000% would be 10.0
this.blur（）意味着光标，也许你选择了一个输入字段，失去了每个选择项的焦点。
this.blur() means that the curser, maybe you selected an input field, looses focus of every select item.
或：
You can use the css3 element zoom (Source)
Firefox不允许使用浏览器进行缩放，因为您无法通过javascript或sth访问用户属性。
Firefox does not allow zooming with the browser because you can't access the user properties via javascript or sth.
所以你可以使用一些允许缩放的CSS样式（CSS3：zoom，如上所述）或增加文本大小！例如，您可以使用包含不同的CSS文件。但是在这里你有跳跃的问题，因为风格化的css元素（浮动等）必须在其属性的事实上交互不同。
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.
我上面发布的缩放版适用于Chrome和IE8 +（如上所述不支持FF）
The zoom I posted above works well in Chrome and IE8+ (FF not supported as mentioned)
-
其他信息：
-- Additional information:
这里是如何使用缩放选项精确缩放的示例。
示例应用程序可以在这里找到
Here is 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!
但这仍然是所有东西，Firefox不支持，也可能是Safari&歌剧？在chrome和IE中它可以工作！
But this is still all stuff, which is not supported by Firefox, or maybe Safari & Opera? In chrome and IE it works!
另一种解决方案是：将主要尺寸放在em中，然后通过设置100％，110％等尺寸来解决（遍布css）。所以你可能有不同的CSS文件，只是需要替换％属性！
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!
但我不认为可能有其他解决方案！ :(
Yet I don't think there might be other solutions! :(
这篇关于使用JavaScript模仿浏览器缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
