html - Facebook 页面嵌入的 iframe 不填充容器宽度

Question

我添加了维基百科的 iframe 来演示我遇到的问题。
Wiki iframe 可以正常显示，但 facebook iframe 却不能。

HTML:

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS:

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

如您所见，我向 facebook 请求一个宽度为 450px 的 iframe，在所附的图片中，模拟器的宽度为 375px，但 fb iframe 仍然没有'像维基百科 iframe 一样填充它的容器。

如何让 fb iframe 填充它的容器？

Answer 1

您无法以正常方式做到 100%。

这是您的 iframe 源代码:

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

注意有一个参数:width=450px。

它设置iframe内容的宽度为450px。

根据 Facebook Plugin documentation :

插件的像素宽度。分钟是 180 & 最大。是 500。

所以Facebook能得到的最大宽度是500。