javascript - Facebook页面插件 - 响应

我需要在网站上嵌入一个Facebook页面插件。根据

的信息

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

在大屏幕上我想要500px宽度，但在较小的情况下，它需要大约300px的东西。

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

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

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

是否有我可以使用的等效<picture> / <video>标记，根据屏幕宽度只会加载一个？

或者，我对iframe

做错了什么

以下是jsfiddle中复制的代码：

正如你所看到的，它有效，但它加载了两个iframe，这远远不够好。如果我在iframe上使用css样式（@media），它只会将其剪掉，而不是加载更窄。