Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Embedded Iframe Resizing (fixes iOS Safari's auto-sizing issues)
// -----------------------------------------------------------
// Makes the iframe fill the screen, but leaves space for the header above the iframe.
// We do this becuase Safari and WebViews on iOS automatically resize the iframe height
// to capture the content of the iframe. This may be fine for some sites and incorrect fo others,
// this is done to make the behavior consitent across browsers and sites.
function hookupIframeResize() {
var iframeElement = document.querySelector('.iframe');
var headerElement = document.querySelector('.header');
function updateIframeSize() {
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var headerHeight = headerElement.offsetHeight; = windowWidth + 'px'; = (windowHeight - headerHeight) + 'px';
// Listen for window resize, which is triggered on mobile rotate also.
// NOTE: If you have access to lodash or underscore, I would wrap this listener in a debounce
$(window).on('resize', function (event) {
// Call update iframe size initially to fill on mobile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.