Facebook 页面插件 - 响应式答案

【问题标题】：Facebook Page Plugin - ResponsiveFacebook 页面插件 - 响应式
【发布时间】：2018-05-04 08:55:05
【问题描述】：

我需要在网站上嵌入 Facebook 主页插件。根据上的信息

可以是 180px 到 500px 之间的任意宽度

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

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

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

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

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

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

下面是jsfiddle中复制的代码：

如您所见，它可以工作，但它加载了两个 iframe，这远非好事。如果我在 iframe 上使用 css 样式 (@media)，它只会将其切断，而不是加载更窄。

【问题讨论】：

.grid 是你添加的自定义类吗？
当您在 iframe URL 中省略 width 参数时似乎可以正常工作...
@AashiqRathnadas 是的，这是我添加的使用 CSS Grid 的自定义类。
@CBroe jsfiddle.net/nuy4r1gk/8 jsfiddle.net/nuy4r1gk/2 进行比较。我尝试了两个宽度参数（在 URL 和通用 iframe 属性中）

【解决方案1】：

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

【讨论】：