Javascript/CSS:设置(firefox)iframe的缩放级别？

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/

transform origin属性允许在不改变其位置的情况下进行缩放.

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