响应宽度 Facebook 页面插件

Facebook 推出了新的页面插件来取代 Like 框插件。

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

我正在用这个新插件替换 Like Box 插件。在一些网站上，我使用了这个 CSS 代码来使插件在元素内响应：

 .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;} 

用此代码替换它不起作用：

 .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;} 

我的页面插件代码如下所示（不提供数据宽度属性）：

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

看起来 Facebook 在 iframe 加载的 DOM 中添加了一个带有内联样式元素的 div 元素：

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

当我将此宽度调整为 100% 时，除了封面照片之外，每个元素都以全宽度对齐。

是否可以为这个新的页面插件提供响应行为，就像使用“赞”框插件一样？

脸书的新“页面插件 https://developers.facebook.com/docs/plugins/page-plugin/“ 宽度范围为180px to 500px根据文档。

• 如果配置如下180px它将强制执行最小宽度180px
• 如果上面配置了500px它将强制执行最大宽度500px

With 自适应宽度检查过，例如：

与 like-box 不同，如果配置错误，该插件会通过坚持边界值来强制执行其限制。

对于小屏幕/响应行为

• 在较小的屏幕上渲染时，强化所需的width插件容器和插件会尝试适应。

• 如果容器比配置的更细，则插件会自动以较小的宽度呈现（以适应较小的屏幕）width.

• 您可以缩小移动设备上的容器，只要插件达到最小值，它就会适合180px以适应。

Without 自适应宽度

• 该插件将以指定的宽度渲染，无论容器宽度如何