Question

对于facebook like按钮，我需要能够在桌面分辨率（539px）上保持默认宽度，并在屏幕分辨率低于640px（移动）时将宽度更改为100％。这不起作用，因为fb-like div依赖于一个名为“data-width”的属性，它在src html中设置一个远程动态加载的iframe宽度和子元素宽度。到目前为止，我已经尝试过：

<style>
@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important}
}
@media only screen and (min-width: 960px) {
    div.fb-like {width:539px !important}
}
</style>

<div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div>

如果屏幕分辨率较低或移动设备较低，如何更改“数据宽度”值？

作为临时措施，我已完成以下操作以防止类似按钮破坏移动设备上的布局：

@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important; overflow-x:auto}
}

这不太理想，因为用户必须向左滑动以查看任何溢出，但这是我能想到的唯一解决方案，直到其他人有工作建议。附上的屏幕截图（iOS 7 iPhone＆amp; Android 4.3.1）...
facebook like button as shown rendering on an Android 4.3.1 device

Answer 1

尝试将.fb-like类放入带有style="width:100%;的div包装器中。现在，您可以添加$(window).bind("load resize", function(){}之类的内容来获取浏览器的实际宽度并调整类似按钮的大小。

编辑：

<script>
    var container_width_current = $('#WRAPPER-DIV').width();

    $(window).bind("load resize", function(){    
         var container_width_new = $('#WRAPPER-DIV').width();

         if (container_width_new != container_width_current) {
             container_width_current = container_width_new;

             $('#container').html('<div class="fb-like-box" ' +
             'data-href="https://www.facebook.com/adobegocreate" ' +
             'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
             'data-stream="true" data-header="true"></div>');
             FB.XFBML.parse();
         }
    }); 
</script>

编辑＃2：

这是一种快速的CSS方法：

#u_0_0 {
    width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
    width: 100% !important;
    height: auto !important;
}

Answer 2

尝试使用facebook的iframe代码，而不是HTML5。

看看这个：

<iframe src="//www.facebook.com/plugins/like.php?href=
https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;
width=225&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;
share=true&amp;height=35&amp;appId=161427297222786" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:100%; height:50px;" 
allowTransparency="true"></iframe>

我已将内联CSS宽度更改为100％，将高度更改为50px。 URL中的宽度为225，这对于facebook来说是最小的。

facebook喜欢按钮：响应宽度

2 个答案: