Facebook点赞按钮：移动设备忽略data-width属性

Question

我在我们的网站上使用了以下HTML代码来显示FB“赞”按钮：

<div class="fb-like" data-href="https://www.facebook.com/MyCompany?ref=hl" data-send="false" data-width="400" data-show-faces="false"></div>

在桌面端一切看起来都很好。但是我发现在移动设备上，data-width属性被忽略了，这就是带有类fb-like的div在页面加载后的样子：

<div class="fb-like fb_iframe_widget fb_iframe_widget_fluid" data-href="https://www.facebook.com/MyCompany?ref=hl" data-send="false" data-width="400" data-show-faces="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;href=https%3A%2F%2Fwww.facebook.com%2FMyCompany%3Fref%3Dhl&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=400" style="display: block; width: 100%; height: auto;>

您可以看到"Width:100%"的样式属性被添加到了div中。而在桌面上，这个div没有添加任何内联样式。

在控制台中，我收到以下错误：

Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

有一个链接到Facebook的文件like.php。

我不确定这个错误消息是否与移动设备上的数据宽度问题有关。也许有人已经遇到了这个问题。我会感激任何帮助或解释。

- Tamara

Answer 1

这是我解决这个问题的方法。我将 class 为 "fb-like" 的 div 放入容器中，并设置此父容器的宽度：

<div class="fb-wrapper">
    <div class="fb-like" data-href="https://www.facebook.com/MyPage?ref=hl" data-send="false" data-width="400" data-show-faces="false"></div>
</div>

CSS：

.fb-wrapper{float: right; width: 400px; height: 30px; overflow:hidden;}

我知道这不是一个非常好的解决方案。我会感激任何关于如何处理它的建议。

- Tamara

Answer 2

我知道可能有点晚了，但是我刚刚自己“解决”了这个问题。将FB div包裹在另一个display属性设置为inline-block的div中。

- admac231