Javascript / CSS: set (firefox) zoom level of iframe?

Question

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.

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.

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.

Are multiple iframes thought to display your webpages or multiple domains ones? — stecb, Jan 11 '11 at 18:19
all the iframes point to pages on the same domain in this particular case — Mala, Jan 12 '11 at 22:51

score 48 · Accepted Answer · edited Jun 14 '12 at 14:35

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/

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.

It doesn't work properly on iPad Safari. See: http://stackoverflow.com/questions/11559700/iframe-css3-scaling-issue-on-ipad-safari-ios-5-0-1 — Attila Kun, Jul 23 '12 at 08:53

score 3 · Answer 2 · edited Aug 15 '13 at 15:12

I got appropriate results like this (tested only in 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>

Maybe this helps.

Javascript / CSS: set (firefox) zoom level of iframe?

2 Answers2

Linked