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>

在台式机上一切都很好。但我发现在移动设备上数据宽度属性被忽略，这就是加载页面后类似fb的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;>

您可以看到将带有“宽度：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;}

我知道，这不是一个非常漂亮的解决方案。我会很感激如何处理它。

Answer 2

我知道这有点晚了但我自己“解决”了这个问题。将FB div包装在另一个div中，并将显示设置为inline-block。

Facebook喜欢按钮：移动设备上会忽略数据宽度属性

2 个答案: