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.

There is no viewport meta tag. It's a non-responsive site. The based version (before the CMS) displays as it should (100% width) while production only displays at 75% width. My guess is an element that renders outside the body, but I can't seem to figure out what — Joshua - Pendo, Mar 26 '13 at 13:31
the project is yes, however the page causing the problem (_index.php) is visible. See the bottom 2 URLs in the question. It is supposed to go live within a couple of days, so the problem requires a solution! — Joshua - Pendo, Mar 29 '13 at 12:30

score 4 · Accepted Answer · edited May 23 '17 at 11:49

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?

score 2 · Answer 2 · answered Mar 29 '13 at 12:57

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.

answered Mar 29 '13 at 12:57

Andrey Mikhaylov - lolmaus

20,948
5
68
119

My client spotted the problem, unfortunately it's not just my device :) Did you try both URLs? The problem occurs on an iPhone as far as I know.. – Joshua - Pendo Mar 29 '13 at 13:36
Yes, i tried both URLs. They have slightly different content but the zoom is identical. – Andrey Mikhaylov - lolmaus Mar 29 '13 at 16:58
1

Does the issue persist when you substitute the production's <head> section with the based one? – Andrey Mikhaylov - lolmaus Mar 29 '13 at 17:02
1

Yes it does. I found the problem however.. the facepil is causing the problems. At least I have my lead. Thanks for the time any of you invested! :) – Joshua - Pendo Mar 29 '13 at 17:07
I added the solution, in case any of you are curious to the fix :) – Joshua - Pendo Mar 29 '13 at 17:44

Mobile view gets smaller after pageload

2 Answers2