出于多种原因，我们必须使用iframe将React应用程序嵌入到我们当前的网页中(不使用React) 。问题是我们在此 React 应用程序中使用了一些通过媒体查询进行响应的组件。
正如您可以想象的那样，由于 iframe 的大小，该 iframe 内的组件会被渲染为窗口较小(本例中为平板电脑)。
有没有办法让 iframe 内的媒体查询响应父窗口的大小？我们现在不太关心响应能力，但至少我们希望看到所有内容都像窗口 iframe 是桌面大小一样呈现。
我看过这篇文章，但似乎不起作用(我认为更改元视口(viewport)仅适用于移动设备):https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
最佳答案
听起来您可以控制父级和 iframe，解决此问题的一种方法是使用 postMessage用于将主机窗口的大小发布到 iframe 中的 API，然后在 React 应用程序中使用 js 对其进行处理。
如果您使用类似 iframe-resizer 的内容您将获得双向消息传递，并且可以免费同时响应 iframe 内容的大小。
关于javascript - 来自父窗口大小的 iframe 媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57255187/