Javascript/CSS: set (firefox) Zoomstufe von iframe?

Question

Ich möchte eine Seite mit mehreren iFrames erstellen, die verschiedene Seiten anzeigen - eine Art "mehrere Seiten nebeneinander suchen". Das Problem ist, dass die Ansichtsfenster ziemlich klein sind und ich nur die obere linke Ecke jeder Seite sehen kann.

Gibt es eine Möglichkeit, den iFrame so einzustellen, dass der Zoom-out von Firefox (Strg-Minus) effektiv ausgeführt wird, so dass die ganze Seite sichtbar ist? Es ist mir egal, ob der Text lesbar ist, nur wenn ich im Grunde sehen kann, wie die Seite aussieht.

Ich brauche das nicht cross-browser (für meine Zwecke muss es nur in der neuesten Firefox zu arbeiten), obwohl offensichtlich eine Cross-Browser-Lösung für jemand anderen, der dies benötigt und stolpert über diese Frage.

Answer 1

Sie können CSS-Anwendung verwandelt zu 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/

Die Transformation Ursprung Eigenschaft ermöglicht es ohne Veränderung seiner Position skaliert werden.

Dies funktioniert für Webkit, Opera, FF und IE9 (ungetestet). Text sieht gut aus und ist immer noch in sehr kleinen Größen lesbar.

Answer 2

bekam ich so entsprechende Ergebnisse (nur in Chrom getestet):

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> 

Vielleicht hilft das.