Question

在开发android应用程序时遇到了一个看起来很奇怪的问题。这是麻烦的页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style>
      * {
        margin:  0;
        padding: 0;
      }

      div {
        width:      100vw;
        height:     calc(100vh);
        background: #333;
      }
    </style>
  </head>
  <body>
    <div id="myDiv"></div>
    <script> 
      alert(document.getElementById("myDiv").offsetHeight);
    </script>
  </body>
</html>

当我从PhoneGap应用程序运行此网页时，屏幕只是空白。我收到一条警告消息“ 0”，它是#myDiv的高度。 height:100vh并非如此，只有height:calc(100vh)并非如此。令人惊讶的是，问题不是calc()出现的：width:100vw和width:calc(100vw)都可以很好地工作。

在上面的示例中，为简单起见，我使用了calc(100vh)。我的实际意图是像calc(100vh - 50px)。

但是，该问题无法在其他地方重现。它仅在PhoneGap应用程序中发生，并且在编译应用程序然后运行时会发生。激活移动视图时，它既不会出现在Android Chrome浏览器中，也不会出现在PC浏览器的开发工具中，因此我认为Android WebView应该会出现这种情况。

为什么会发生这种情况，可能的解决方法是什么？

为什么calc（）在Android WebView中不能与高度一起使用？

0 个答案: