When a page is embedded in an iframe, the viewport expands to the size of the iframe, which causes some pages to render in Desktop mode instead of Mobile. For example, the following page always renders in 'MOBILE' mode on e.g. Mobile Safari on iPhones. <!DOCTYPE html> <head> <meta content="width=device-width" name="viewport"> <style> body::after { content: "DESKTOP" } @media (max-width:767px) { body::after { content: "MOBILE" } } </style> </head> <div style="width: 1000px; border: 1px solid blue;"> very wide element </div> See this in action at http://output.jsbin.com/tizisoxidu. However, when the same page is embedded in an iframe, it renders in 'DESKTOP' mode: <!DOCTYPE html> <head> <meta content="width=device-width" name="viewport"> </head> <iframe src="//output.jsbin.com/tizisoxidu"></iframe> See this at http://output.jsbin.com/qagelujucu.
> the viewport expands to the size of the iframe This is frame flattening, which we do by default on iOS. We also don't do anything with <meta name="viewport"> tags in iframes.
Note that in the top-level/parent frame, the viewport width never changes. So even if the size of the content, including interior iframes, becomes very large, the viewport remains at e.g. 320px and mobile rendering is maintained. However, once the content is put into an iframe, it ends up rendering much differently depending on the CSS rules that are used. One idea to fix this while keeping flattening would be make the CSS viewport size in frames to equal the nominal size of the frame. For example, if the iframe width is specified to be '100px', '100vw', or '100%', the viewport would be fixed to the corresponding pixel sizes, at least for the purpose of CSS media queries. This is pretty difficult to work around currently. I'm not aware of any way to to disable flattening for a particular frame. The only reasonable workaround I'm aware of is either 1) to create scrolling element and put the extra-wide content inside it, but that requires changing the DOM of the iframe, or 2) disable horizontal scrolling, but this really not ideal.