http://developers.facebook.com/docs/reference/plugins/comments/
It says there that:
The mobile version will automatically show up when a mobile device
user agent is detected. You can turn this behavior off by setting the
mobile parameter to false. Please note: the mobile version ignores the
width parameter, and instead has a fluid width of 100% in order to
resize well in portrait/landscape switching situations. You may need
to adjust your CSS for your mobile site to take advantage of this
behavior. If preferred, you can still control the width via a
container element.
But when I visit my page on the iphone, although I see the “mobile design” of the Facebook Comments, the width of the box is the one I set on the code.
My test page: http://www.santiagosarceda.com/facebook/
This is my code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="fb-comments" data-href="http://www.site.com/3953172" data-num-posts="5" data-width="300"></div>
</body>
</html>
The box allways renders at 300px width.
Is there any problem with Facebook Comments itself? Because a few days ago everything was working ok.
Thanks for reading!
The Facebook Comments generates inline style that has changed and the following CSS seemed to override the inline SPAN CSS for me to make Facebook Comments Fluid Width
I hope this works for you.