【发布时间】：2017-08-18 18:31:22
【问题描述】：
我正在尝试在我的网站上嵌入一个具有完全响应行为的 Facebook 页面插件。基本上，我只希望它的宽度在不同的浏览器尺寸下发生变化；当浏览器为 480 或更窄时为 480px；当 481
我意识到这个问题has been asked here before，但是由于 FB 的更改，以前的答案要么不再起作用，要么要求用户刷新他们的浏览器窗口。但是在this blog post 上，我找到了一个功能齐全的响应式FB Page 插件的实际示例；当调整浏览器窗口的大小时，它会即时更改大小和其他特征。
博客文章提到了他们使用的 JavaScript，以及一个指向您可以在其中看到它的网站的链接。但是他们没有提供所有涉及的 CSS 和 HTML 的精简摘要，而且他们网站上的代码对于我的新手来说有点复杂。我尝试将他们的 JavaScript 添加到我的网站，但由于某种原因它对我不起作用。当您更改浏览器宽度时，我的 DIV #fbsection 会很好地调整其宽度，但其中的 DIV .fb-page 只有在您刷新时才会更改。
我使用他们的响应式模板在 Dreamweaver CS 6 中创建了我的网站，它包含了他们的样式表 boilerplate.css 和 JavaScript respond.min.js。相关代码如下：
（来自 HTML 文档）
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="bluedolphin.css" rel="stylesheet" type="text/css">
<script src="respond.min.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).on('resize', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 500);
});
$(window).on('load', function() {
setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 1500);
});
CMSSpace.changeFBPagePlugin = function () {
//getting parent box width
var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
//getting parent box height
var container_height = (Number($('.fb-column').height()) - (Number($('.fb-column-header').height()) + Number($('.fb-column- header').css('margin-bottom').replace("px", "")) + Number(($('.fb-column').css('padding-top').replace("px", "")*2)))).toFixed(0);
if (!isNaN(container_width) && !isNaN(container_height)) {
$(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
}
if (typeof FB !== 'undefined' ) {
FB.XFBML.parse();
}
}
</script>
（也在 HTML 文档中）
<div id= "fbsection">
<h1>Facebook</h1>
<p class="centered"><a href="https://www.facebook.com/pg/bluedolphinbodywork/">Like my Page</a> for the chance to be notified when I post special offers there, and please Invite your Facebook Friends, too! </p>
<div class="fb-page" style="max-width:300px; margin:auto;"
data-href="https://www.facebook.com/bluedolphinbodywork"
data-tabs="timeline"
data-small-header="false"
data-adapt-container-width="true"
data-height="1000"
data-width="300"
data-hide-cover="false"
data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/bluedolphinbodywork" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/bluedolphinbodywork">Blue Dolphin Bodywork</a>
</blockquote>
</div>
</div>
</div>
我的样式表中的相关片段 bluedolphinbodywork.css：
#fbsection {
display: block;
margin-left: auto;
margin-right: auto;
max-width:480px;
vertical-align:top;
margin-bottom:5px;
padding-bottom:5px;
position: relative;
}
@media only screen and (min-width: 481px) {
#fbsection {
display:inline-block;
max-width:250px;
}
@media only screen and (min-width: 732px) {
#fbsection {
max-width:300px;
}
我做错了什么？ 感谢所有回复。
【问题讨论】：
-
一个没有任何媒体查询的工作jsfiddle。
标签： javascript html css facebook