Created
December 18, 2017 21:37
-
-
Save bendytree/0135b34e6c88b98e0c92b7dcef15ad0b to your computer and use it in GitHub Desktop.
iOS iframe width workaround
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment