facebook喜欢按钮:响应宽度

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和Android 4.3.1)...

Answer 1

尝试将.fb-like类放入 div 包装器中style="width:100%;。现在您可以添加类似 a 的内容$(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;
}