Javascript / CSS：set（firefox）iframe的缩放级别？ [英] Javascript / CSS: set (firefox) zoom level of iframe?

问题描述

我想创建一个包含多个显示不同网页的iframe的网页 - 一种并排浏览多个网页类型的内容。麻烦的是，这样做，视口很小，我只能看到每个页面的左上角。

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有效地做firefox的缩小（ctrl减）几次，使整个页面是可见的？我不特别关心文本是否清晰，只有当我基本上可以看到页面的样子。

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.

我不需要这是跨浏览器（为了我的目的，它只需要在最新的firefox工作），虽然显然一个跨浏览器的解决方案将是更好的为任何人谁需要这个和绊倒这个问题。

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.

推荐答案

您可以将css变形应用于iframe：

You can apply css transforms to iframes:

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属性允许缩放而不改变其位置。

The transform origin property allows it to be scaled without changing its position.

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

This works for Webkit, Opera, FF and IE9 (untested). Text looks great and is still legible at very small sizes.

这篇关于Javascript / CSS：set（firefox）iframe的缩放级别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！