Facebook connect breaks mobile websites

I’ve had a really frustrating problem on the mobile version of a website that I am working on. This error has taken me hours debugging and the problem and solution is really simple. I am using the header <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> for scaling. However the page doesn’t scale to my Android phones window. The page width is wider then the screen and it looks really awful.

The problem was related to html-code from Facebook Connect that my site is using. This code snippet comes from Facebook so I really dont have any clue why it is needed and how it works. All I can say is that it breaks webpages using viewport in smartphones.

The problem is the following

<div id="fb-root"></div>

Change it to this and the problem is solved

<div id=fb-root" style="display:none"></div>

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.