我需要在网站上嵌入一个Facebook页面插件。 根据有关
https://developers.facebook.com/docs/plugins/page-plugin
它可以是 180px 到 500px 之间的任何宽度
在大屏幕上，我想要 500px 的宽度，但在较小的屏幕上，它需要大约 300px。
现在，有一个选项可以使iframe调整到容器的宽度，但这一部分根本不适合我。
所以，我有两个 iframe(一个用于 500px 宽度，一个用于 300px)，并使用@media查询，我隐藏/显示正确的一个。
但是，它仍然加载两个 iframe。
是否有我可以使用的等效<picture>/<video>标签，该标签只会加载一个，具体取决于屏幕宽度？
或者，我在iframe上做错了什么？
下面是在 jsfiddle 中复制的代码：
https://jsfiddle.net/nuy4r1gk/2/<-- 2 个内嵌框架
如您所见，它可以工作，但它加载了两个 iframe，这远非好事。如果我在 iframe 上使用 css 样式 (@media)，它只是切断它，而不是加载更窄。
https://jsfiddle.net/nuy4r1gk/4/<-- 1 个带 CSS 的 iframe
我在使用 iFrame 嵌入方法时找到了一个有效的解决方案。它适用于支持的 180-500px 之间的任何容器宽度
https://stackoverflow.com/a/52459262/10401291