100 Altezza% sul browser mobile usando i CSS

Question

sto lavorando sul mio sito e voglio farlo sembrare molto semplice sul cellulare, in fondo ci sono solo tre sezioni, ognuna delle quali dovrebbe andare bene larghezza della finestra e l'altezza

<section style="width: 100%; min-height: 100%"> 

</section> 

Sembra perfetto sul mio browser di computer in modalità dispositivo, ma quando lo apro sul mio cellulare (iPhone), c'è un problema con la barra url, che diventa più piccola, mentre scivoliamo verso il basso. Al caricamento della pagina, l'altezza minima si adatta all'altezza del browser, compresa la barra, e non cambia quando la barra cambia dimensione. Quindi non si adatta più allo schermo. Ho provato questo:

<meta name="viewport" content="height=device-height"> 

Ma poi, le sezioni sono troppo alte, ovviamente. Probabilmente avrei potuto fare qualche soluzione in jQuery, ma preferirei di no. Spero ci siano alcune semplici soluzioni in CSS. Grazie per il tuo tempo. Se vuoi vederlo dal vivo: http://kacpergalka.nazwa.pl/_portfolio

Answer 1

Si potrebbe provare l'unità vh (altezza viewport) nello stile min-altezza.

<section style="width: 100%; min-height: 100vh"> 

</section> 

Un'altra opzione sarebbe quella di utilizzare calc().

<section style="width: 100%; height: calc(100%);"> 

</section> 

Answer 2

Si può provare questo la scala meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">