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.
In my experience, with the zoom function trying to scale the iframe div of #frame , it would scale the iframe size and not the content within it (which is what you're going for). Looks like this. Works for me on IE8, Chrome and FF. Use zoom in IE8 Standards Mode, use -ms-zoom in quirks mode.
Just multiply the original dimensions by the zoom ration you want to use. For example, if you want to scale to 71% as shown in the example below, 1000px x 2000px becomes 710px x 1420px. The zoom factor is input for the zoom , -moz-transform , -o-transform , and -webkit-transform properties.
Divide outerWidth by innerWidth Since outerWidth is measured in screen pixels and innerWidth is measured in CSS pixels, we can use that to use the ratio between them to determine the zoom level. Then browserZoomLevel is proportional to how much we zoom in or out.
min-width: 100%; This will freeze the width, you can do the same for height too.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With