Подтвердить что ты не робот

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

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

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

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

4b9b3361

Ответ 1

Вы можете применить css-преобразования к 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/

Свойство origin origin позволяет масштабировать его без изменения его положения.

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

Ответ 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>

Возможно, это помогает.