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
.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {width: 100% !important;}
I hope this works for you.