Javascript / CSS: установить (Firefox) уровень масштабирования iframe?

Question

Я хотел бы создать страницу с несколькими фреймами, отображающими разные страницы - что-то вроде «просматривать несколько страниц рядом».Проблема в том, что при этом области просмотра довольно маленькие, и я вижу только верхний левый угол каждой страницы.

Есть ли способ настроить iframe для эффективного уменьшения масштаба Firefox (ctrl-минус) несколько раз, чтобы вся страница была видна?Меня не особо волнует разборчивость текста, только если я в основном могу видеть, как выглядит страница.

Мне не нужно, чтобы это было кросс-браузерным (для моих целей нужно только работатьв последнем Firefox), хотя очевидно, что кросс-браузерное решение было бы предпочтительным для тех, кто нуждается в этом и сталкивается с этим вопросом.

Answer 1

Вы можете применить преобразования CSS к фреймам:

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/

Свойство источника трансформации позволяет масштабировать его, не изменяя свою позицию.

Этоработает для Webkit, Opera, FF и IE9 (не проверено).Текст выглядит великолепно и все еще разборчиво при очень маленьких размерах.

Answer 2

Я получил соответствующие результаты, как это (проверено только в 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>

Может быть, это поможет.