CSS Calc 在 Chrome 中有效，但在 Android 4.4.2 上的 Phonegap 应用程序中无效

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>

这在 Windows 上的 Chrome 浏览器中完美运行 - 即使打开了设备模拟。 $('.topbtns')[0].getBoundingClientRect()returns

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

但是，当我使用相同的 HTML 和 CSS 并将其构建到我的 Android Phonegap 应用程序中时，.topbtns 是无处可寻的。同样getBoundingClientRect代码returns

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

我想这可能是因为

Android Webview 不理解 vh 单位。但是，我修改了规则以使用 `bottom:95vh;top:75vh} 效果很好。
我也用 -webkit-calc 替换了 calc 但没有用。

就好像 calc 和它的 -webkit-calc 堂兄弟不理解 vh 而 webview 本身理解。

我很感激任何能够表达这里发生的事情的人。在写这篇文章时，我遇到了这个 - http://slides.com/html5test/the-android-browser#/。但是，我不清楚 Phonegap 使用的 WebView 是否就是这里讨论的那个。

Answer 1

我相信this可以帮到你，calc功能在Android（<= 4.4.4）的某些版本中不支持，所以问题不是Phonegap / Cordova，是您测试的设备可能不支持它

CSS Calc 在 Chrome 中有效，但在 Android 4.4.2 上的 Phonegap 应用程序中无效

CSS Calc works in Chrome but not in Phonegap app on Android 4.4.2

css

android

webkit

calc

cordova