html - Facebook 点赞按钮 : data-width attribute is ignored on mobile devices

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 的链接。

我不知道此错误消息是否与移动设备上的数据宽度问题有关。也许有人已经面临这个问题。我将不胜感激任何帮助或解释。

Answer 1

我是如何解决这个问题的。我将类为“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;}

我知道，这不是一个非常漂亮的解决方案。对于如何处理它的任何建议，我将不胜感激。