我需要在网站上嵌入一个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
答案 0 :(得分:1)
使用iFrame嵌入方法时,我找到了可行的解决方案。它适用于支持的180-500px之间的任何容器宽度