Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: iframe responsive gestalten

  1. #1
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard iframe responsive gestalten

    Hallo,

    hier geht es um das Einbinden eines externen Inhalts. HTML-Seite (Heizungskonfigurator), in der Besucher eine bestimmte Konfiguration seiner Wunschheizung eingeben kann, um sich ein individuelles Angebot einzuholen.

    Ich füge zwischen Kopf- und Fußteil der Seite einen neuen Artikel und Inhaltselement (HTML), iframe ist in den Einstellungen erlaubt.

    HTML-Code:
    <iframe height="700" width="100%" src="https://externeseite.com"> 
       <a href="https://externeseite.com">https://externeseite.com</a> 
    </iframe>
    Auf dem Desktop erscheint alles wie gewünscht. Auf mobilen Geräten bleibt der externe Teil überbreit, und es muss geschoben werden.

    Nächster Versuch:
    HTML-Code:
    <div>
    <iframe src="https://externeseite.com" id="idIframe" width="100%" onload="iframeLoaded()" style="border: none;" allowfullscreen> </iframe>
    </div>
    Hier passiert das selbe. Wenn ich den Desktop-Browser schmaler mache, passt sich auch der externe Inhalt an. Auf dem mobilen Gerät (iPhone, iPad) bleibt es überbreit.

    Habt ihr einen Tipp für mich, dass der iframe auch responsive ist?

    Viele Grüße
    Jürgen

  2. #2
    Contao-Fan Avatar von JMMB
    Registriert seit
    08.03.2012.
    Beiträge
    260
    User beschenken
    Wunschliste

    Standard

    Hallo,
    ein paar Zeilen Code die das responsive iframe ermöglichen:
    HTML-Code:
    <div class='embed-container'>
    <iframe src='http://alistapart.com/article/responsive-web-design/' style='border:0'></iframe>
    </div>
    und das CSS dazu:

    Code:
    .embed-container {
    	position: relative;
    	padding-bottom: 56.25%;
    	height: 0;
    	overflow: hidden;
    	max-width: 100%;
    } 
    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

  3. #3
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Zitat Zitat von JMMB Beitrag anzeigen
    ein paar Zeilen Code die das responsive iframe ermöglichen:
    Vielen Dank. Irgendwie klappt das nicht. Nach wie vor erscheint auf dem iPhone nur der linke obere Teil des Banners. Könnte in der externen Seite ein Fehler sein? Dies ist der URL: https://easyquote.thernovo.com/leuch

    Oder muss ich noch ein media-query einbauen?

    Nebenbei gesagt, will mir die Firma Buderus, die die externe Seite zum Einbinden erstellt hat, auch noch Support geben. Aber ich höre nach meiner Anfrage nichts. Vielleicht kriege ich es mit deiner Hilfe hin.

    edit:
    Nachtrag: Wenn ich deinen Link so nehme, wie du ihn gepostet hast, kriege ich gar keine externe Seite zu sehen.

  4. #4
    Contao-Fan Avatar von JMMB
    Registriert seit
    08.03.2012.
    Beiträge
    260
    User beschenken
    Wunschliste

    Standard

    Das ist der Link zur Iframe-Quelle, oder. Der Link zur Seite wo es eingebaut ist wäre prima.

  5. #5

  6. #6
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.548
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Bei mir zeigt es den Inhalt des iFrames an:

    screenshot.jpg
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  7. #7
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Unvollständig. Da fehlt eine ganze Menge. Und auf dem mobilen Gerät fehlt noch mehr.

  8. #8
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.548
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Keine Ahnung, was Du meinst, aber auf dem Desktop wird mir das selbe angezeigt wie unter https://easyquote.thernovo.com/leuch
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  9. #9
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Ich versuche mal aufzuräumen.

    Der direkte Link ist extern. Ich möchte den Link in die Seite www.leuchshk.de einbauen (per iframe).
    Auf dem großen Moni ist alles gut. Sogar wenn ich den Browser ganz schmal mache.

    Auf dem iPhone sehe ich nur die linke obere Ecke. Auf dem iPad etwas mehr, aber die interaktiven Elemente sind unerreichbar.

  10. #10
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.548
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Auf meinem Android Smartphone ist der Konfigurator vollständig zu sehen. Lediglich die Höhe des iFrames müsste man ggf. anpassen, damit man nicht scrollen muss. Ansonsten sind alle interaktiven Elemente erreichbar.

    Was allerdings nicht angezeigt wird, ist das Hintergrundbild mit den beiden Pantoffeln, das als Data-URL eingebunden ist.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  11. #11
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Du meinst jetzt nicht die "Krücke", den Link "Für Smartphone hier entlang"?


    Drei Screenshots, eins vom iPhone. Probiert auf Safari, Firefox und Chrome

    Die teilweise abgebildeten Ausschnitte sind nicht verschiebbar.
    Angehängte Grafiken Angehängte Grafiken
    Geändert von juergiboe (16.05.2019 um 21:58 Uhr)

  12. #12
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.548
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von juergiboe Beitrag anzeigen
    Du meinst jetzt nicht die "Krücke", den Link "Für Smartphone hier entlang"?
    Nein, den Link meine ich nicht, sondern das iFrame-Element darunter.
    Angehängte Grafiken Angehängte Grafiken
    Geändert von xchs (16.05.2019 um 22:03 Uhr)
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  13. #13
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Sind deine Screenshots direkt vom Smartphone?

    Auf dem Mac, wenn ich den Safari ganz schmal mache, sieht es bei mir auch so aus. Nur da, wo es so aussehen MUSS, tut es das nicht. Jefenfalls hier.
    Geändert von juergiboe (18.05.2019 um 12:39 Uhr)

  14. #14
    Contao-Nutzer Avatar von juergiboe
    Registriert seit
    02.03.2010.
    Ort
    Flensburg
    Beiträge
    155

    Standard

    Hallo nochmal,
    inzwischen hat mir ein Freund, der ein Android-Smartphone hat, gemeldet, dass der iframe bei ihm normal dargestellt wird. Man erreicht alle Optionen, um das Formular auszufüllen.

    Frage an die Apfelfraktion, kann jemand bestätigen, dass der iFrame auf dem iPhone nicht korrekt dargestellt wird?

    Übrigens betrifft es auf meinen mobilen Geräten Safari, Chrome und Firefox.
    Geändert von juergiboe (18.05.2019 um 12:24 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •