我正在开发一个围绕“响应式设计”概念的网站,但是facebook的社交插件是静态宽度的,并且在调整大小时会“破坏”布局。
使用媒体查询,我已经将插件设置为在低分辨率浏览器(移动设备等)上隐藏。然而,在桌面浏览器上,当浏览器窗口被重新调整为更小,但又不是太小以隐藏插件时,它们就会打破布局。
有没有办法为Facebook的社交插件设置一个流畅的宽度?
发布于 2018-05-16 19:37:50
这是我最终得到的结论:
(function() {
window.addEventListener('load', updateWidth);
window.addEventListener('resize', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$('.fb-like, .fb-comments').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr('data-width', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();https://stackoverflow.com/questions/6500424
复制相似问题