Iframe mit Responsive Width

[maxhiebsch]

Hallo Community,

ich bin schon etwas länger aus der CSS Geschichte raus und habe ein Problem, welches ich nicht lösen kann.
Ich habe ein Tool programmiert, welches bestimmte Produkte nach Kriterien filtert.

https://ensy-select.de/

Ich habe es versucht auch einigermaßen responsiv zu gestalten.

Nun soll das Tool auf einer externen Webseite integriert werden - per iFrame.
Mein Problem ist aber, dass wenn ich dort als width 100% für den Iframe angebe, mir dieser wie auf dem Handy angezeigt wird.
Gebe ich eine feste Breite von z.B. 1400px an, funktioniert es. Jedoch wird es dann auf mobilen Geräten viel zu groß dargestellt, da diese ja keine Breite von 1400 px haben.

Hat jemand eine Idee wie man das lösen kann?

 

[basti1012]

Wenn der iFrame auf den gleichen Server eingebunden wird , wäre das alles kein Problem.
Serienübergreifend einen iFrame responsiv zu machen ist schon etwas komplizierter.
Man könnte dafür postmessage benutzen. Damit kann man serverübergreifend mit dem iFrame kommunizieren (man brauch aber auf beiden Servern Zugang).
So ein ähnliches Thema hatte ich mal hier
https://www.tutorials.de/threads/aendern-des-iframe-wenn-eingebundene-seite-refreshed.410292/

Da hatte ich das auch erstmal ausprobiert und lief ganz gut.
Da müsstest da nur die Fenstergröße des Besuchers auslesen und dann an den der iFrame Seite schicken und die notwendigen responsiven Schritte einleiten.

Aber mal was anderes. Deine verlinkte Seite ist nicht richtig responsiv.
Wenn die 100% responsiv wäre , sollte das auch im iFrame responsiv sein, wenn der iFrame auf 100% steht.
Könnte mich auch irren weil hatte paar Wochen Pause gemacht.
Nur deine Seite sollte erstmal 100% responsiv sein , dann wäre alles andere auch einfacher