小编Chr*_*sJM的帖子

对于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)...