Bug width on Android browser with FB.init()

I developp a mobile web app with facebook javascript SDK.

I use the meta <meta name="viewpo开发者_运维技巧rt" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> to scale my content. But when I init my facebook app FB.init(), page width expands a lot and horizontal scroll appears.

How to fix this bug width on Android browser ? (don't appear on iOS)

We were encountering this same issue and we came up with a workaround. Note that obviously this may be outdated in future FB API modifications.

We had to load in the FB SDK asyncronously and make sure the XFBML param is set to false.

<!-- this div element is required by FB JS SDK -->
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
 FB.init({appId: facebookapikey, status: false, cookie: false, xfbml: false});
};
(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
</script>

Hope that helps everyone out.