Question

http://developers.facebook.com/docs/reference/plugins/comments/

这是我在页面上包含Facebook javascript SDK后生成评论区域的方式：

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

正如您所看到的，facebook会根据您提供的数据属性设置注释区域的宽度：

data-width="600"

在这种情况下，我告诉facebook我希望该区域为600像素。但我现在正在构建一个响应式网站，需要评论部分才能使屏幕的宽度达到100％。不做这些工作：

data-width="100"
data-width="100%"

有没有办法为Facebook评论获得流畅的宽度？

Answer 1

试试这段代码：

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

Answer 2

第一个尺寸适用于小于1200px且大于979px的设备。唯一的问题是IE有时候，但你可以使用类似的东西：width: 1200px\9; - IE 8及以上

此示例来自bootstrap，我经常使用它。要使用它，您需要的win version更少。但是这段代码在aby浏览器中工作（旧的IE除外）。

.fb-comments { width: 490px; /* or width: 50%; */ }

/* Large desktop */
@media (min-width: 1200px) {
    .fb-comments { width: 600px; /* or width: 50%; */ }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .fb-comments { width: 400px; /* or width: 50%; */ }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .fb-comments { width: 30px; /* or width: 50%; */ }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .fb-comments { width: 200px; /* or width: 50%; */ }
}

也尝试使用百分比，而不是像素，即使是填充，例如：

.fb-comments { width: 90%; height: auto; padding: 0 5%; }

如何让Facebook评论的流畅宽度达到100％？

2 个答案: