iOS iframe width workaround

get-document-size.js

/*
 * This is a workaround for a bug on iOS which prevents iframes from
 * knowing their size. 
 *
 * When iframe calls `document.width`, the natural width of the content
 * is returned instead of the iframe's width. So if the iframe is 360px
 * wide and the body contains a 1024px image, then `document.width` will
 * incorrectly return 1024.
 *
 * However, if the content is *smaller* than the iframe, then the correct
 * dimensions will be returned.
 *
 * This workaround momentarily hides the body to get the document size.
 */

var getDocumentSize = function () {
  // Check for iOS
  var ios = /(iPad|iPhone)/i.test(window.navigator.userAgent);
  
  // Hide the body
  if (ios) document.body.style.display = "none";
  
  // Load the measurements
  var size = {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  };
  
  // Restore the body
  if (ios) document.body.style.display = "";
  
  return size;
};