Responsive iframes

The frame-sizing CSS property sets the size of an <iframe> element to that of it contents, to avoid scrolling in the iframe. Embedded documents allow this with the <meta name="responsive-embedded-sizing"> element and request resizing in the embedding page by calling window.requestResize().

Baseline Status: This feature is currently Limited and is missing in at least one major browser engine.

Desktop Browser Engine Support

Google Chrome

—

Unsupported

Mozilla Firefox

—

Unsupported

Apple Safari

—

Unsupported

Microsoft Edge

—

Unsupported

Mobile Browser Engine Support

Chrome Android

—

Firefox Android

—

Safari iOS

—

Specifications and References

Specification ↗ Feature XML ↗

MDN Browser Compat Data Keys:

api.Window.requestResize ↗ css.properties.frame-sizing ↗ css.properties.frame-sizing.auto ↗ css.properties.frame-sizing.content-block-size ↗ css.properties.frame-sizing.content-height ↗ css.properties.frame-sizing.content-inline-size ↗ css.properties.frame-sizing.content-width ↗ html.elements.meta.name.responsive-embedded-sizing ↗