Facebook Connect on mobile site expanding the page width
Facebook's mobile examples use the script: http://connect.facebook.net/en_US/all.js. This script adds to the div fb-root. My mobi开发者_JAVA技巧le site is 320px wide and I use the viewport meta setting. Including Facebook's script causes a big extra space on the right side of the actual content because it's settings it's contents to 575px wide. I tried including code to replace the 575px with 320px ("#fb-root").val().replace("575px","320px"); but that hasn't helped -- maybe I'm doing it wrong (using jQuery).
Anyone know how to restrict this to 320px?
Update: Found a bug a report on this with two work-arounds:
Set status to false in the FB.init. I can verify that this does fix the problem for me, but breaks the ability for users to login.
Move
<div id="fb-root"></div>directly under<body>. This didn't work for me.
Source: http://bugs.developers.facebook.net/show_bug.cgi?id=18528
I used the following css style rule to beat this 575px #fb-root width problem:
#fb-root > div { left:-575px !important; }
That works because, if you locate the #fb-root node in, say, Firebug's HTML tree-viewer, you'll find that it contains a child div that is styled as follows:
position: absolute; top: -10000px; height: 0pt; width: 0pt;
i just set this in the css by default
#fb-root{display:none}
and when i need to use the FB dialogs(when calling FB.ui), i do this:
$('#fb-root').show();
and in the callback of the FB.ui, i do this
$('#fb-root').hide();
so here is an example:
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
this works for me, and i have tested on some devices.
The code you've provided seems to only replace the value in the code, which has, by that point, already fired. You might try to setting the width with jquery's .css() method on fb-root. Make sure this is fired after the fb js sdk is included, or put into the callback method if loading asynchronously.
Or just wrap it in another div, set its height and width, and the put overflow:hidden;
加载中,请稍侯......
精彩评论