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

【问题标题】：CSS Calc works in Chrome but not in Phonegap app on Android 4.4.2CSS Calc 在 Chrome 中有效，但在 Android 4.4.2 上的 Phonegap 应用程序中无效
【发布时间】：2017-05-08 02:58:23
【问题描述】：

我使用以下规则

.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()返回

{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#/。但是，我不清楚 Phonegap 使用的 WebView 是不是这里要讨论的。

【问题讨论】：

标签： android css cordova webkit calc

【解决方案1】：

我相信this 可以帮助您，某些版本的Android (calc 功能，所以问题不在于Phonegap / Cordova，是您测试的设备可能不支持

【讨论】：

书签的好网站！我曾经检查过 w3school
我认为这不是问题所在 - 我没有使用 calc 进行除法/乘法运算。最后我放弃了 CSS 并开始使用 jQuery 正确放置有问题的按钮。
@Sagar - caniuse 是一个非常好的资源。如果您一直在使用 w3schools，请考虑切换到 Mozilla 作为您需要各种 Web 技术参考的首选端口
@DroidOS 我不明白，Android 操作系统版本是否是使用 CSS calc 的问题（
我已经接受了你的回答。我试图提出的观点 - 我看到的行为不是由于对 Android calc 的限制。无论如何，我现在已经在这里放弃了 CSS 方法，而是使用了 jQuery。