2015-05-21 20 views
5

Sto sviluppando un'app Web e funziona perfettamente nel browser e quando lo si salva nella schermata principale, su Android e iOS. Tuttavia, quando lo si scarica come un'app vera, l'altezza% del corpo non funziona su Android (funziona se lo si imposta su un valore in pixel). Ho anche alcuni elementi che usano l'altezza del viewport, che inoltre non funziona, il che è strano perché c'è un buon supporto per le unità viewport. È come se il viewport non avesse altezza.altezza: 100% su <body> non funziona nell'app Web Android?

sua piuttosto roba di base:

HTML:

<body> 
    <div class="container"> 
    <div class="some-element"></div> 
    <div class="some-element"></div> 
    </div> 
</body> 

CSS:

body, html { height: 100%; } 
.container { height: 100%; } 
.some-element { height: 50vh; } 

Può essa avere a che fare con il "guscio" (che io non sono stato coinvolto in atto) che viene utilizzato quando è installato come app?

risposta

0

vh unità hanno un supporto molto scarso sui dispositivi Android, quindi a meno che non si utilizza Android 4.4+ si è purtroppo sfortunato.

È possibile controllare vh unis supportano a http://caniuse.com/#feat=viewport-units

Per essere onesti, anche se vh e vw unità sono grandi, ho ancora evitare di usarle in quanto non v'è stato così scarso supporto da Android.

Come soluzione al problema, provare a utilizzare uno div in stile come tabella e utilizzare height:50% per ottenere lo stesso risultato. Se hai bisogno di ulteriore supporto, aggiorna il tuo codice relativo e io (o qualcun altro) ti aiuterò.