Facebook Connect在移动网站上扩展页面宽度

问题描述 投票:5回答:4

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

任何人都知道如何将其限制为320px?

更新:发现一个错误报告,有两个解决方法:

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

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

facebook
4个回答
5
投票

我使用以下css样式规则来击败这个575px#fb-root宽度问题:

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

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

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

1
投票

我只是默认在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);
    });
},

这适用于我,我已经在一些设备上测试过。


0
投票

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


0
投票

或者只是将它包装在另一个div中,设置它的高度和宽度,并将put overflow:hidden;

© www.soinside.com 2019 - 2024. All rights reserved.