Mobile view gets smaller after pageload

Question

I've got a little problem with one of the sites I've developed. The problem is quiet simple, however the solution seems to be a bit harder.

The problem

The problem is that the page is being rendered as it should be on a mobile device at first, but right after the pageload is finished, the page resizes to fit the viewport. Nothing strange, this happens at almost every non-responsive website. But the strange thing is that only 75% of the available width is being used.

I already compared the based/sliced version of the design with the production version. The based version does render as it should (100% width). I've tried to spot the differences in the CSS, but I can only find a couple, I tried resetting those, but that didn't work.

Also, I've tried to disable the javascript (it's only Lightbox and 1 JqueryUI "AddClass" effect). The javascript effect has only 1 task: after pageload the header will be resized from 480px to 220px height. There are no changes being made to the width of any element on the page.

Last but not least I started Adobe Edge Inspect and took a look on the pagesource of the mobile device. But unfortunately I can't spot any element on the page that exceeds the width of the "body" tag. The only one exceeding the width is the header image, but the image is within a div (100% width) with overflow:hidden

Based and production version

If anyone would be so kind to take a look at what messes up the rendering, that would be awesome. I can't seem to find out what is causing the issue.

Based (working): http://www.nambi.nl/lefunq/ Production (rendering at 75% width on mobile): http://www.lefunq.com/_index.php

Thanks to everyone who takes the time to look into this issue.

Answer 1

Your problem was caused by the facepile code:

<div
  class="fb-facepile"
  data-href="http://www.facebook.com/pages/Le-Funq/113332665510819"
  data-size="large"
  data-max-rows="1"
  data-width="450"
></div>

More info:

As soon as the facepile cannot be loaded due to the invalid login, the page becomes resized. As soon as I log in to facebook and the facepile is shown, the page is stretched the way it should. I just have to find out what is causing the weird scaling, because if there's no facepile, it's a 0x0 div/iframe, etc.

Solutions:

I have tried a couple of things. Onload or Onready events, and hiding or removing the facepile code. In the end, neither of these options worked. The scaling happened before the facepile was loaded completely. The final solution is a javascript workaround, checking if there's a mobile device, if so, then disable the facepile code:

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) == false ) {
    document.write('<fb:facepile href="http://www.facebook.com/pages/Le-Funq/113332665510819" size="large" max_rows="1" show_count="false" width="450" class="facepile"></fb:facepile>');
  }

I found the way to detect if the browser is mobile in this answer:

What is the best way to detect a mobile device in jQuery?

Answer 2

I tried native browser, Firefox and Dolphin on Android 2.3.7.

Both pages render at 100% zoom, and the zoom does not change after the page is loaded completely.

I believe this problem is specific to the software of your device.