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:

    HTML
    <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

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

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

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

    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?

    und wenn du um den iframe einen div container legst bei dem du die breite und höhe angibst? also nicht mittels iframe die höhe und breite bestimmen. sondern nur die seite einbinden und die darstellung wie höhe und breite mittels css festlegen?

    so machen die das auf der screenfly auch wie es aussieht

    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:

    HTML
    <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?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden