Facebook 页面插件 - 响应式

Question

我需要在网站上嵌入 Facebook 页面插件。 根据有关资料

https://developers.facebook.com/docs/plugins/page-plugin

它可以是 180px 和 500px 之间的任何宽度

在大屏幕上我想要 500 像素的宽度，但在较小的屏幕上它需要大约 300 像素。

现在，有一个选项可以让iframe调整到容器的宽度，但它的那部分对我来说根本不起作用。

所以，我有两个 iframe（一个用于 500px 宽度，一个用于 300px），并且使用@media查询，我隐藏/显示正确的一个。

但是，它仍然加载两个 iframe。

是否有我可以使用的等效<picture> / <video>标签，它只会加载一个，具体取决于屏幕宽度？

或者，我对iframe做错了什么？

下面是在 jsfiddle 中复制的代码：

https://jsfiddle.net/nuy4r1gk/2/ <-- 2 个 iframe

正如您所看到的，它可以工作，但它正在加载两个 iframe，这远远不够好。 如果我在 iframe 上使用 css 样式（ @media ），它只会将其切断，而不是加载更窄。

https://jsfiddle.net/nuy4r1gk/4/ <-- 1 个带有 css 的 iframe

Answer 1

我在使用 iFrame 嵌入方法时找到了一个有效的解决方案。 它适用于受支持的 180-500 像素之间的任何容器宽度

https://stackoverflow.com/a/52459262/10401291