La visualizzazione mobile diventa più piccola dopo il caricamento della pagina

Question

Ho un piccolo problema con uno dei siti che ho sviluppato. Il problema è semplice, ma la soluzione sembra essere un po 'più difficile.

Il problema

Il problema è che la pagina viene resa come dovrebbe essere su un dispositivo mobile in un primo momento, ma subito dopo il pageload è terminata, la pagina ridimensiona per adattarsi alla finestra. Niente di strano, questo succede in quasi tutti i siti web non responsivi. Ma la cosa strana è che viene utilizzato solo il 75% della larghezza disponibile.

Ho già confrontato la versione basata/a fette del progetto con la versione di produzione. La versione basata esegue il rendering come dovrebbe (larghezza 100%). Ho cercato di individuare le differenze nel CSS, ma posso trovarne solo un paio, ho provato a reimpostarle, ma non ha funzionato.

Inoltre, ho provato a disabilitare il javascript (è solo Lightbox e 1 effetto JqueryUI "AddClass"). L'effetto javascript ha solo 1 compito: dopo il pageload l'intestazione verrà ridimensionata da 480px a 220px height. Non vengono apportate modifiche alla larghezza di alcun elemento nella pagina.

Ultimo ma non meno importante ho avviato Adobe Edge Inspect e ho dato un'occhiata all'origine delle pagine del dispositivo mobile. Ma sfortunatamente non riesco a individuare alcun elemento nella pagina che superi la larghezza del tag "body". L'unico superamento della larghezza è l'immagine di testa, ma l'immagine è all'interno di un div (larghezza 100%) con overflow:hidden

base e versione di produzione

Se qualcuno sarebbe così gentile da dare un'occhiata a ciò che incasina il rendering, sarebbe fantastico. Non riesco a scoprire cosa sta causando il problema.

Based (di lavoro): http://www.nambi.nl/lefunq/ di produzione (il rendering in larghezza 75% sul mobile): http://www.lefunq.com/_index.php

Grazie a tutti coloro che si prende il tempo di guardare in questo problema.

Answer 1

Il tuo problema è stato causato dal codice 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> 

Maggiori informazioni:

Non appena il facepile non può essere caricato a causa della accesso non valido, la pagina diventa ridimensionato. Non appena effettuo l'accesso a Facebook e viene visualizzato il facepile, la pagina viene allungata come dovrebbe. Devo solo scoprire cosa sta causando il ridimensionamento strano, perché se non ci sono facepile, è un 0x0 div/iframe, ecc.

Solutions:

Ho provato un paio di cose. Onload o Onready e nascondendo o rimuovendo il codice del face-pack. Alla fine, nessuna di queste opzioni ha funzionato. Il ridimensionamento è avvenuto prima che il facepile fosse caricato completamente. La soluzione finale è una soluzione javascript, controllando se c'è un dispositivo mobile, in caso affermativo, quindi disattivare il codice 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>'); 
    } 

ho trovato il modo per rilevare se il browser è mobile in questa risposta:

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

Answer 2

Ho provato browser nativo, Firefox e Dolphin su Android 2.3.7.

Entrambe le pagine eseguono lo zoom al 100% e lo zoom non cambia dopo che la pagina è stata caricata completamente.

Credo che questo problema sia specifico del software del dispositivo.