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

前端 未结 2 1623
北荒
北荒 2021-01-31 09:24

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 v

相关标签:
2条回答
  • 2021-01-31 09:48

    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.

    0 讨论(0)
  • 2021-01-31 09:57

    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.

    0 讨论(0)
提交回复
热议问题