[英]Javascript / CSS: set (firefox) zoom level of iframe?
我想创建一个包含多个显示不同页面的iframe的页面 - 一种“并排浏览多页”类型的东西。 麻烦的是,这样做,视口非常小,我只能看到每个页面的左上角。
有没有办法设置iframe有效地执行firefox的缩小(ctrl-minus)几次,以便整个页面可见? 我不特别在意文本是否清晰,只要我能基本看到页面的样子。
我不需要这是跨浏览器(为了我的目的,它只需要在最新的Firefox中工作)虽然显然跨浏览器解决方案将是更好的,为了任何其他需要这个和偶然发现这个问题的人。
您可以将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;
}
transform origin属性允许在不改变其位置的情况下进行缩放。
这适用于Webkit,Opera,FF和IE9(未经测试)。 文字看起来很棒,并且在非常小的尺寸下仍然清晰可辨。
我得到了这样的合适结果(仅在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>
也许这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.