1

For several reasons, we had to embed a React app into our current web page (not using React) by using an iframe. The problem is that we're using some components in this React app that are responsive by using media queries.

As you can imagine, the components within that iframe are rendered as if the window was smaller (a tablet in this case) because of the size of the iframe.

Is there any way to make the media queries from within the iframe respond to the size of the parent window? We don't care much about responsiveness right now, but at least we'd like to see everything rendered as if the window iframe was a desktop size.

I had a look at this post, but did not seem to work (I think that changing the meta viewport only works on mobile devices): https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

Emi
  • 4,597
  • 2
  • 31
  • 34

1 Answers1

0

As it sounds like you have control of both the parent and the iframe, one way to tackle this would be to use the postMessage API to post the size of the host window in to your iframe and then deal with it using js in your React app.

If you use something like iframe-resizer you'll get bi-directional messaging as well as the possibility to respond to the size of your iframed content at the same time for free.

Will Jenkins
  • 9,507
  • 1
  • 27
  • 46
  • The problem is that the components lib imported there is using media queries and I'm not able to change anything there. This is why I'd need some way to make the iframe think is bigger than it actually is. – Emi Jul 29 '19 at 14:22