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

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

然而，当我使用相同的HTML＆amp; 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堂兄在webview本身的情况下不理解vh。

对于任何能够表达这里发生的事情的人，我都有责任。在写这篇文章的时候，我遇到过这个问题 - http://slides.com/html5test/the-android-browser#/。但是，我不清楚Phonegap使用的WebView是这里讨论的那个。

Answer 1

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

CSS Calc适用于Chrome，但不适用于Android 4.4.2上的Phonegap应用

1 个答案: