CSS Calc работает в Chrome, но не в PhoneGap приложение на Android 4.4.2

Question

Я использую следующее правило

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

, который используется для размещения пары кнопок снизу в центре экрана

<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> 

Это прекрасно работает в моем браузере Chrome в Windows - даже при включенной эмуляции устройства. $('.topbtns')[0].getBoundingClientRect() возвращает

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

Однако, когда я использую тот же HTML & CSS и построить его в мое приложение Android PhoneGap .topbtns нигде не видно. То же getBoundingClientRect код возвращает

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

Я думал, что это может быть потому, что

• Android Webview не понимает vh единиц. Тем не менее, я изменил правило, чтобы использовать `bottom: 95vh; top: 75vh}, который работал отлично.
• Я также заменил calc на -webkit-calc, но безрезультатно.

Это как бы calc и его -webkit-calc кузена не понимает vh в то время как в WebView сама делает.

Я был бы обязан всем, кто мог бы выразить то, что здесь происходит. Во время написания этого я столкнулся с этим - http://slides.com/html5test/the-android-browser#/. Однако мне непонятно, что WebView, используемый Phonegap, является тем, который обсуждается здесь.

Answer 1

Я считаю, что this может помочь вам, функция calc не поддерживается в некоторых версиях Android (< = 4.4.4), так что проблема не PhoneGap/Кордова, это устройство, где вы проверить, что, вероятно, не поддерживается его