Javascript / CSS：设置（firefox）iframe的缩放级别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4660659/
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
Javascript / CSS: set (firefox) zoom level of iframe?
提问by Mala
I'd like to create a page with multiple iframes displaying different pages - a sort of "browse multiple pages side-by-side" type thing. The trouble is that in doing so, the viewports are pretty small and I can only see the top-left corner of each page.
我想创建一个带有多个 iframe 显示不同页面的页面 - 一种“并排浏览多个页面”类型的东西。麻烦的是，这样做时，视口非常小，我只能看到每个页面的左上角。
Is there a way to set the iframe to effectively do firefox's zoom-out (ctrl-minus) a few times so that the whole page is visible? I don't particularly care if the text is legible, only if I can basically see what the page looks like.
有没有办法设置 iframe 以有效地执行 Firefox 的缩小（ctrl-minus）几次，以便整个页面都可见？我并不特别关心文本是否清晰，只要我能基本看到页面的样子。
I don't need this to be cross-browser (for my purposes it only needs to work in the latest firefox) although obviously a cross-browser solution would be preferable for the sake of anyone else who needs this and stumbles across this question.
我不需要它是跨浏览器的（就我的目的而言，它只需要在最新的 firefox 中工作）尽管显然跨浏览器解决方案对于需要它并偶然发现这个问题的任何其他人来说都是可取的。
回答by methodofaction
You can apply css transforms to iframes:
您可以将 css 转换应用于 iframe：
iframe {
-moz-transform: scale(0.25, 0.25);
-webkit-transform: scale(0.25, 0.25);
-o-transform: scale(0.25, 0.25);
-ms-transform: scale(0.25, 0.25);
transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
border: solid #ccc 10px;
}
The transform origin property allows it to be scaled without changing its position.
变换原点属性允许在不改变其位置的情况下对其进行缩放。
This works for Webkit, Opera, FF and IE9 (untested). Text looks great and is still legible at very small sizes.
这适用于 Webkit、Opera、FF 和 IE9（未经测试）。文字看起来很棒，并且在很小的尺寸下仍然清晰易读。
回答by Magentron
I got appropriate results like this (tested only in Chromium):
我得到了这样的适当结果（仅在 Chromium 中测试）：
CSS:
CSS：
<style>
#iframe {
-moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
-webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
-o-transform: scale(0.25, 0.25) translate(-150%, -150%);
transform: scale(0.25, 0.25) translate(-150%, -150%);
}
#wrapper {
width: 256px;
height: 230px;
}
</style>
HTML:
HTML：
<div id="wrapper">
<iframe id="iframe" width="1024" height="920" scrollbars="no"></iframe>
</div>
Maybe this helps.
也许这有帮助。
