2013-08-24 28 views
6

sarei certo che questo problema è stato fatto prima, ma non ho trovato nulla molto simile (c'erano domande un po 'simili)100% altezza e CSS sul mobile

Una tendenza nei browser mobile è da nascondere la barra degli indirizzi mentre scorri verso il basso, il che è ottimo, ma ha problemi per i siti web che dipendono pesantemente da altezze basate su percentuali, come il sito web reattivo che sto facendo ora.

Il problema è che la dimensione della finestra cambia in base alla visibilità della barra degli indirizzi. Significa che l'altezza del 100% è maggiore quando la barra degli indirizzi è invisibile rispetto alla sua dimensione quando è visibile. Ciò si traduce in una riconfigurazione a scatti del sito Web quando si scorre. Questo problema è particolarmente problematico su Google Chrome per dispositivi mobili, poiché la barra degli indirizzi ritorna ogni volta che scorri verso l'alto ovunque ti trovi nella pagina. Molte riconfigurazioni a scatti.

Voglio 100% per indicare il 100% in termini di browser senza la barra degli indirizzi. Qualunque soluzione io prenda, richiederà alcuni Javascript ma non riesco a trovare un modo per ottenere queste informazioni. Un'opzione che viene in mente è l'altezza dello schermo, ma ciò significa che la barra di notifica del sistema operativo mobile o di qualsiasi altro elemento dell'interfaccia utente del browser permanente non verrà presa in considerazione. Quindi immagino che questo sia il primo passo, e il prossimo passo è trovare il modo più eloquente per introdurre questa altezza a tutti gli elementi di altezza basata sulla percentuale (so che tutto ciò potrebbe essere fatto tramite Javascript, sarebbe bello se potessi tenerlo in un minimo però e non fare cumuli di riaggiustamento degli elementi su eventi di ridimensionamento).

Le risposte sono molto apprezzate.

risposta

1

Ho avuto un problema simile sul mio sito web, che ho risolto nascondendo la barra degli indirizzi al caricamento della pagina e impostando gli elementi che volevo essere al 100% in jQuery. Risposta breve, è che non penso che tu possa farlo solo con i CSS. Ecco il mio jQuery:

// When ready... 
window.addEventListener("load",function() { 
    // Set a timeout... 
    setTimeout(function(){ 
     // Hide the address bar! 
     window.scrollTo(0, 1); 
    }, 0); 
}); 

Ecco il jQuery per la regolazione in altezza 100%:

// Set the height of the element 
$('#selector').css('height', $(window).height()); 

    // Continuously set the height of the window when screen resizes 
    $(window).resize(function() { 
     var theHeight = $(window).height(); 
     $('#selector').css('height', theHeight); 
}); 

Spero che questo è stato utile!

P.S - Quel codice deve essere all'interno di $ (documento) .ready (funzione() {...});

Oh, anche .. è importante notare che se si scorre fino in cima, verrà visualizzata nuovamente la barra degli indirizzi e si sposterà temporaneamente il materiale dell'altezza 100%. Non ho ancora trovato una soluzione per questo, ma ha funzionato per quello che mi serviva.