javascript - 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

标签： javascripthtmlcssfacebook

Answer 1

使用 iFrame 嵌入方法时，我找到了一个可行的解决方案。它适用于支持的 180-500px 之间的任何容器宽度

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