Question

我想创建一个包含多个显示不同页面的iframe的页面 - 一种“并排浏览多页”类型的东西。麻烦的是，在这样做时，视口非常小，我只能看到每个页面的左上角。

有没有办法设置iframe有效地执行firefox的缩小（ctrl-minus）几次，以便整个页面可见？我不特别在意文本是否清晰，只要我能基本看到页面的样子。

我不需要这是跨浏览器（为了我的目的，它只需要在最新的Firefox中工作）虽然显然跨浏览器解决方案更适合其他任何需要这个并且偶然发现的人这个问题。

Answer 1

您可以将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;
}

http://jsfiddle.net/6QMcX/

变换原点属性允许在不改变位置的情况下进行缩放。

这适用于Webkit，Opera，FF和IE9（未经测试）。文字看起来很棒，并且在非常小的尺寸下仍然清晰可辨。

Answer 2

我得到了这样的合适结果（仅在Chromium中测试过）：

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：

<div id="wrapper">
    <iframe id="iframe" width="1024" height="920" scrollbars="no"></iframe>
</div>

也许这有帮助。

Javascript / CSS：设置（firefox）iframe的缩放级别？

2 个答案: