移动网站上的 Facebook Connect 扩大了页面宽度答案

【问题标题】：Facebook Connect on mobile site expanding the page width移动网站上的 Facebook Connect 扩大了页面宽度
【发布时间】：2011-11-03 17:14:36
【问题描述】：

Facebook 的移动示例使用脚本：http://connect.facebook.net/en_US/all.js。此脚本添加到 div fb-root。我的移动网站是 320 像素宽，我使用视口元设置。包含 Facebook 的脚本会在实际内容的右侧产生很大的额外空间，因为它的内容设置为 575px 宽。我尝试包含代码以将 575px 替换为 320px ("#fb-root").val().replace("575px","320px");但这并没有帮助——也许我做错了（使用 jQuery）。

有人知道如何将其限制为 320 像素吗？

更新：发现了一个错误报告，有两种解决方法：

在 FB.init 中将状态设置为 false。我可以验证这确实解决了我的问题，但破坏了用户登录的能力。
将<div id="fb-root"></div> 直接移动到<body> 下。这对我不起作用。

来源： http://bugs.developers.facebook.net/show_bug.cgi?id=18528

【问题讨论】：

标签： facebook

【解决方案1】：

我使用以下 css 样式规则来解决这个 575px #fb-root 宽度问题：

#fb-root > div { left:-575px !important; }

这是因为，如果你在 Firebug 的 HTML 树查看器中找到 #fb-root 节点，你会发现它包含一个样式如下的子 div：

position: absolute; top: -10000px; height: 0pt; width: 0pt;

【讨论】：

【解决方案2】：

我只是在css中默认设置了这个

#fb-root{display:none}

当我需要使用 FB 对话框时（调用 FB.ui 时），我会这样做：

$('#fb-root').show();

在 FB.ui 的回调中，我这样做了

$('#fb-root').hide();

所以这里是一个例子：

var inviteFriend = function (msg) {
    $('#fb-root').show();
    FB.ui({
        method: 'apprequests',
        message: msg
    }, function (response) {
        $('#fb-root').hide();
        console.log('sendRequest response: ', response);
    });
},

这对我有用，我已经在一些设备上进行了测试。

【讨论】：

似乎不必要地复杂...在 fb-root 的嵌套 div 中添加负“左”位置似乎更容易。

【解决方案3】：

您提供的代码似乎只替换了代码中的值，此时已经触发了该值。您可以尝试在 fb-root 上使用 jquery's .css() 方法设置宽度。确保在包含 fb js sdk 后触发，或者如果异步加载则放入回调方法中。

【讨论】：

我在一分钟前发现了一个错误：bugs.developers.facebook.net/show_bug.cgi?id=18528。有两种解决方法。
第一个解决方法破坏了登录 facebook 的能力，这对我不起作用，第二个解决方法不能解决问题。 iframe facebook 添加的固定宽度为 575px。我试图弄清楚我如何改变它。到目前为止，我还没有获得 iframe 的运气（id 和 name 每次都会改变，所以我不能使用它们）。

【解决方案4】：

或者只是把它包裹在另一个div中，设置它的高度和宽度，然后把overflow:hidden;

【讨论】：