1

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 のコメントの流動的な幅を取得する方法はありますか?

4

2 に答える 2

5

このコードを試してください：

<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>
于 2013-12-15T20:13:46.133 に答える
1

最初のサイズは、1200px 未満で 979px より大きいデバイス用です。唯一の問題は IE にある場合もありますが、次のようなものを使用できます: width: 1200px\9;- IE 8以降

このサンプルは、私が頻繁に使用しているbootstrapからのものです。それを使用するには、より少ない勝利バージョンが必要です。ただし、このコードはブラウザーごとに機能します (古い 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%; }
于 2013-04-11T15:47:35.120 に答える