This page has a fixed width which is set to 720 pixels.
When a page uses fixed widths (pretty common on legacy apps and sites) they might not fit the size of the iframe containing them (unless it uses the full screen width). This is normally solved by showing scrollbars and a positive addition with the magic iframe is that you only have to worry about horizontal scroll.
Magic iframe also has some other super powers that come in handy for this scenario.
The scaleContent property is set to false by default but when set to true it will scale the content inside the iframe according to the ratio between the width of the content and the width of the magic iframe; e.g. if the width of the content is 720px and the magic iframe has a width of 360px the content will get scaled to 0.5 (360/720) to fit inside the magic iframe. Scale content also comes with and optional debounce property called scaleDebounce that takes a number (milliseconds) which is used to debounce concurrent resize events, 0 by default.
By default the "matchContentWidth" is set to false. Possible values are true, false and auto. If set to true, the magic iframe will use the width of the content as width for the magic iframe. Note however that when set to true the magic iframe won't be able to slim down when the width has increased (tricky with responsive layouts using fixed breakpoints). Auto will try to look for width rules on the page and if it finds any, it will set matchContentWidth to true. If you have responsive page that uses breakpoints it's recommended to set this to false. The use case for setting the width of the magic iframe to reflect the width of the content is to allows for other ways of handling overflow, like wrapping the magic iframe in a div with overflow set to auto or allow the whole page to scroll if it's not wide enough.