Facebook页面插件 - 响应

时间:2018-05-04 08:55:05

标签: javascript html css facebook

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

的信息

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

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

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

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

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

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

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

或者,我对iframe

做错了什么

以下是jsfiddle中复制的代码:

https://jsfiddle.net/nuy4r1gk/2/&lt; - 2 iframes

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

https://jsfiddle.net/nuy4r1gk/4/&lt; - 带if css的iframe

1 个答案:

答案 0 :(得分:1)

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

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