Widok mobilny zmniejsza się po pageload

Question

Mam mały problem z jedną z witryn, które stworzyłem. Problem jest prosty, jednak rozwiązanie wydaje się nieco trudniejsze.

Problem

Problem polega na tym, że strona jest renderowane jak powinno być na urządzeniu przenośnym w pierwszym, ale zaraz po zakończeniu pageload, strona zmienia rozmiar w celu dopasowania do rzutni. Nic dziwnego, dzieje się tak na prawie każdej niereagującej stronie. Ale dziwne jest to, że używa się tylko 75% dostępnej szerokości.

Już porównałem opartą/pokrojoną wersję projektu z wersją produkcyjną. Wersja bazowa renderuje się tak, jak powinna (szerokość 100%). Próbowałem dostrzec różnice w CSS, ale mogę znaleźć tylko parę, próbowałem zresetować te, ale to nie zadziałało.

Próbowałem również wyłączyć javascript (to tylko efekt Lightbox i 1 JqueryUI "AddClass"). Efekt javascript ma tylko jedno zadanie: po pageload rozmiar nagłówka zostanie zmieniony z 480 na wysokość 220 pikseli. Nie ma zmian w szerokości żadnego elementu na stronie.

Wreszcie, rozpocząłem Adobe Edge Inspect i przyjrzałem się źródłu stron na urządzeniu mobilnym. Ale niestety nie widzę żadnego elementu na stronie, który przekracza szerokość znacznika "body". Jedynym przekraczającej szerokość jest obraz nagłówka, ale obraz jest w div (100% szerokości) z overflow:hidden

Based i wersji produkcyjnej

Jeśli ktoś byłby tak miły, aby spojrzeć na co zakłóca renderowanie, byłoby niesamowite. Nie mogę się dowiedzieć, co jest przyczyną problemu.

Based (pracy): http://www.nambi.nl/lefunq/ Produkcja (renderowania na 75% szerokości na telefon komórkowy): http://www.lefunq.com/_index.php

Dziękujemy wszystkim, którzy ma czas, aby spojrzeć na ten problem.

Answer 1

Twój problem został spowodowany przez kod facepile:

<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> 

Więcej informacji:

Jak tylko facepile nie mogą być ładowane z powodu nieważnego logowania, strona zostaje zmieniony. Jak tylko zaloguję się na facebooku i zostanie wyświetlona twarz, strona zostanie rozciągnięta tak, jak powinna. Po prostu muszę się dowiedzieć, co powoduje dziwne skalowanie, ponieważ jeśli nie ma facepile, jest to 0x0 div/iframe itd.

Solutions:

Próbowałem kilka rzeczy. Onload lub Onready zdarzeń oraz ukrywanie lub usuwanie kodu twarzy. W końcu żadna z tych opcji nie zadziałała. Skalowanie miało miejsce, zanim płyta została całkowicie załadowana. Ostateczne rozwiązanie jest javascript obejście, sprawdzając, czy jest to urządzenie mobilne, a jeśli tak, to wyłącz kod facepile:

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>'); 
    } 

Znalazłem sposób wykryć czy przeglądarka jest mobilny w tej odpowiedzi:

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

Answer 2

Próbowałem natywną przeglądarkę, Firefox i Dolphin na Androida 2.3.7.

Obie strony są renderowane z powiększeniem 100%, a zoom nie zmienia się po całkowitym załadowaniu strony.

Uważam, że ten problem dotyczy oprogramowania urządzenia.