Geek Answers Handbook

Mobile view gets smaller after pageload

I have a little problem with one of the sites that I developed. The problem is simple, but the solution seems a little more complicated.

Problem

The problem is that the page is displayed as it should be on the mobile device, but immediately after pageload is completed, the page changes to fit the visible window. Nothing strange, it happens on almost every unresponsive website. But it is strange that only 75% of the available width is used.

I have already compared the based / sliced ​​version of the design with the production version. The original version does the rendering (100%). I tried to spot the differences in CSS, but I can find a couple, I tried to reset them, but that didn't work.

Also, I tried disabling javascript (this is just the Lightbox effect and 1 JQueryUI "AddClass"). The javascript effect has only 1 task: after pageload, the size of the header will be changed from 480px to 220px. No changes are made to the width of any element on the page.

Finally, but not least, I launched Adobe Edge Inspect and looked at the resource source of the mobile device. But, unfortunately, I can’t notice any element on the page that exceeds the width of the body tag. The only one that is larger than the width is the header image, but the image is within the div (100% width) with overflow:hidden

Basic and production version

If someone would be so kind as to take a look at what ruined the rendering, that would be awesome. I can not understand what is causing the problem.

Founded (working): http://www.nambi.nl/lefunq/ Production (rendering with a width of 75% on a mobile phone): http://www.lefunq.com/_index.php

Thanks to everyone who takes the time to study this issue.

+6
source share
2 answers

Your problem was caused by a face 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>

Additional Information:

As soon as the raised file cannot be loaded due to incorrect login, the page will be changed. As soon as I sign up on facebook and the face image is displayed, the page will be stretched as it should. I just need to figure out what causes weird scaling, because if there is no face, it is a 0x0 div / iframe , etc.

Solutions:

I tried a couple of things. Onload or Onready , as well as hiding or deleting character code. In the end, none of these options worked. Scaling happened before facepile was fully loaded. The final solution is a javascript workaround, checking if there is a mobile device, if so, then disable the face 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 a way to detect if the browser is mobile in this answer:

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

+4
source

I tried my own browser, Firefox and Dolphin on Android 2.3.7.

Both pages are rendered at 100% zoom, and the scale does not change after the page is fully loaded.

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

+2
source

More articles:


All Articles