CSS Calc fonctionne dans Chrome, mais pas dans l'application Phonegap sur Android 4.4.2

Question

J'utilise la règle suivante

.topbtns 
{ 
position:absolute; 
bottom:95vh; 
right:0; 
left:0; 
top:calc(95vh - 21vw - 1.2em); 
text-align:center; 
} 

qui est utilisé pour positionner une paire de boutons en bas au centre de l'écran

<div class='topbtns'> 
<div class='tear t-tosponsor'><div>View Storefront</div></div> 
<div class='tear t-continue' id='btnContinue'><div>Continue</div></div> 
</div> 

Cela fonctionne parfaitement dans mon navigateur Chrome sur Windows - même avec l'émulation de périphérique activée. $('.topbtns')[0].getBoundingClientRect() retours

{top: 538.2374877929688, right: 375.20001220703125, bottom: 
538.2374877929688, left: 0, width: 375.20001220703125…} 

Cependant, quand j'utilise le même code HTML CSS & et construire dans mon application Android Phonegap .topbtns est nulle part en vue. Le même renvoie le code getBoundingClientRect

{height:111,width:360,left:0,right:360,bottom:-497.875,top:-60} 

Je pensais que cela pourrait être dû au fait

• L'Android Webview ne comprend pas vh unités. Cependant, j'ai modifié la règle pour utiliser `bottom: 95vh, top: 75vh} qui fonctionnait parfaitement. J'ai également remplacé calc avec -webkit-calc mais en vain.

Il est comme si calc et sa cousine -webkit-calc ne comprend pas vh tandis que le WebView ne se.

Je serais obligé à tous ceux qui pourraient être en mesure d'exprimer ce qui se passe ici. En écrivant ceci, je suis tombé sur ce - http://slides.com/html5test/the-android-browser#/. Cependant, il n'est pas clair pour moi que le WebView utilisé par Phonegap est celui qui est discuté ici.

Answer 1

Je crois que this pourrait vous aider, la calc fonctionnalité n'est pas dans certaines versions d'Android (< = 4.4.4), de sorte que le problème n'est pas Phonegap/Cordova, est l'appareil où vous testez qui ne probablement pas pris en charge