FacebookのコメントボックスをレスポシブWEBデザイン対応させて可変にする方法です。
Facebookのページで作成したコメントボックスをブログやサイトに設置したら、スマホからアクセスされるユーザー向けに、CSSファイルを編集して可変対応して上げましょう。
(追記)以前のコメントボックスの場合
CSSでスマホやタブレットから見た場合でも可変で表示されるように設定します。
1 2 3 4 5 |
.fb-comments, .fb-comments iframe[style], .fb-comments span[style] { width:100%!important; } |
(追記)新しいコメントボックスの場合
2014年 現在の新しいコメントボックスはスマホでの閲覧時は自動的に幅に合わせてサイズが可変になるようです。http://9-bb.com/facebook%E3%81%AE%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%8Ccss%E3%81%A7%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%AA%E3%82%AD%E3%83%83/
FacebookのCommentsページにも仕様が書いてありましたのでご参考までに。
The width of the plugin. Either a pixel value or the literal 100% for fluid width. The mobile version of the Comments plugin ignores the width parameter, and instead has a fluid width of 100%.
コメント