Darstellung einer Responsive-Design Website in iframe

[moviestar]

Hallo,
ich möchte auf meiner "responsiven" Webseite die Darstellung ebendieser auf einem iPhone simulieren, wie es z.B. auf der Seite Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions gemacht wird.

Dazu habe ich einen iframe angelegt mit folgendem Code:

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

Hier der Beispiel-Link dazu: Test - kreativpott - Design für Web und Print

Das klappt jetzt auch in Safari, Firefox und Chrome super, 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.

Ich benutze Wordpress mit dem Angular-Theme von Themeforest, aber ich glaube, es ist eher ein HTML/JS Problem. Kann mir da irgendjemand weiterhelfen? Fänd ich toll!

Viele Grüße
Andreas

 

[threadi]

Auch wenn der HTML-Code deiner Seite nicht valide ist, hängt dieses Verhalten mit dem CSS der eingebundenen Seite zusammen. Daher hast Du gleich mal das falsche Unterforum erwischt ;) Ich habe leider keinen IE hier um mir das näher anzuschauen, vermute aber es hängt mit grid.css der eingebundenen Seite zusammen.

 

[moviestar]

Danke für die Antwort.
Das mit dem falschen Unterforum tut mir leid, aber leider hatte ich gar keine Ahnung, ob das jetzt in HTML, CSS oder JS gehört. Wär schön, wenn noch jemand einen Tipp hätte, woran dieses Verhalten des iframe noch liegen könnte, weil die Simulation ja auch im IE auf der oben genannten Screenplay-Seite funktioniert. Die scheinen also irgendwas anders zu machen mit dem iframe.

Grüße aus Duisburg

 

[Gunzi]

Funktioniert auf meinem IE 9 wunderbar, btw: Schöne Website :)

 

[moviestar]

Dankeschön! Muß das mal mit einer fremden Installation testen, vieleicht hat das was mit dem Cache zu tun, das das bei mir nicht klappt.