Darstellung einer Responsive-Design Website in iframe

Hallo,
ich benutze WP 3.3.1 mit dem responsive Theme "Angular" von Themeforest und möchte auf meiner Webseite die Darstellung ebendieser auf einem iPhone simulieren, wie es z.B. auf der Seite http://quirktools.com/screenfly/ mittels iframe gemacht wird.

Dazu habe ich einen iframe angelegt mit folgendem Code:

<iframe style="border: 20px solid black;" src="http://www.kreativpott.de" scrolling="yes" width="320" height="480"></iframe>
</span>

Hier der Link zur Beispielseite: kreativpott.de/test/

Das klappt jetzt auch in Safari, Firefox und Chrome super - die Seite skaliert auf iPhone-Breite und muss nur vertikal gescrollt werden - aber auf allen Versionen des IE in Windows wird die im Iframe dargestellte Seite nicht auf die vorgegebene Breite reduziert, teilweise schiesst sich auch der Rest der Seite ab, indem das gesamte Layout die Breite des iframe annimmt.

Mich wundert nun, dass die Darstellung auf der oben genannten Screenfly-Seite auch im IE reibungslos funktioniert, also machen die irgendwas anders als ich. Hab auch keine Ahnung, ob das an meinem HTML, CSS oder JS liegt. Kann mir da jemand helfen, wäre für jeden Tipp dankbar.

Grüße aus Duisburg

Zitat von dfm

Tja Internet Explorer halt. Drecks Browser -> Drecks Darstellung.

da wirds wahrscheinlich nur helfen ne eigene css für IE schreiben.

Ja, aber wie kann man denn das Verhalten des iframe über CSS überhaupt steuern?? Ich kann ihn damit positionieren, Rahmen bestimmen etc., aber wie wirke ich auf den Inhalt ein?

versuch ich mal. Danke

Tja, Satz mit X.

Hab jetzt den gesamten Code von Screenfly "ausgeborgt", sieht jetzt auch besser aus, mit Schatten und so, aber die Seite passt sich immer noch nicht dem Rahmen an. Höhe und Breite werden auch im Screenfly innerhalb des iframe-Tags bestimmt.

Hier der code:

<div style="width:320px; background:none repeat scroll 0 0 #4d4d4d; border-radius: 5px 5px 5px 5px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); margin: 0 auto 120px; padding: 15px; z-index: 2;">
<div style="height:480px;"><iframe scrolling="yes" src="http://kreativpott.de/" style="height:480px;width:320px;background-image:none; display:inline-block;"></iframe></div></div>

wobei ich den Header und den Footer weggelassen hab. Hast du noch nen Tipp?