Iframe responsiv gestalten?

[Rolf B]

Hallo Jörg,

Denn ich versuche, den Viewport des Users zu ermitteln und setze damit die Breite des Iframe fest.

Fest. Wirklich fest? Warum eigentlich? Man kann einen iframe doch auch mit CSS an Hand der Viewportbreite dimensionieren.

Anhand dessen bemisst sich dann die Höhe.

Was aber bedeutet, dass Du ein Breiten-/Höhenverhältnis des Viewports voraussetzt. Oder verstehe ich Dich miss?

Mit den Einheiten vw und vh kannst Du den iframe exakt nach der Größe des Viewports einrichten. Entweder prozentual (80vw = 80% Viewportbreite) oder mit einem definierten Rand (z.B. calc(100vw - 3em), zusammen mit margin:auto auch horizontal zentriert). Analog die Höhe mit vh. Oder, wenn Du unbedingt willst, dass die iframe-Höhe in einem bestimmten Verhältnis zur Breite steht, dann rechne die Höhe auch mit vw aus. Oder verwende min, max oder clamp, um bestimmte Werte nicht zu überschreiten. JavaScript ist da kaum nötig; es sei denn, du verwendest IrgendEinen Browser, oder ein androides Urgewächs, der das alles nicht kennt.

Der Inhalt des iframe passt sich dann (bei Firefox und Chrome) den Maßen des iframe an.

Ich hoffe, ich konnte Dir was Neues erzählen…

Rolf