Question

我想要一个与屏幕（或视口）大小完全相同的div，所以代码：

<html>
  <body style="width:100%;height:100%;margin:0;background:blue">
    <div style="width:100%;height:100%;background:red"></div>
  </body>
</html>

简单。它在我的桌面Chrome浏览器中显示一个红色屏幕。与android mobile chrome相同。但是在我的应用程序中使用WebView，它会显示蓝屏。我已经尝试了50％的高度，它在桌面和移动Chrome浏览器中的效果都很好，但不适用于WebView。 div的高度始终为0.红色矩形仅在我将div的高度设置为100px等绝对单位时显示。我怎样才能让它正常工作？

Answer 1

你可以用javascript轻松实现。你知道javascript代码吗？

<html>
  <body style="width:100%;height:100%;margin:0;background:blue">
    <div id="myDiv" style="width:100%;height:100%;background:red"></div>
  </body>
</html>
        <script>
            var val  = window.screen.height;
                document.getElementById("myDiv").height = val;
        </script>

最后一件事是在webview客户端启用了javascript。

Answer 2

好吧，我想我发现了什么问题。基本上android的webview和chrome for android共享相同的渲染引擎。 This doc说：

新的Web视图也与Chrome for Android共享相同的渲染引擎，因此WebView和Chrome之间的渲染应该更加一致。

因此，如果某些代码适用于一个代码，那么它应该适用于另一个代码。如果没有，可能是webview上的设置有问题。 API doc说：

建议将WebView布局高度设置为固定值或MATCH_PARENT，而不是使用WRAP_CONTENT。当使用MATCH_PARENT作为高度时，WebView的父级都不应使用WRAP_CONTENT布局高度，因为这可能导致视图的大小调整不正确。

我的webview布局：高度曾经设置为WRAP_CONTENT，在我将其更改为MATCH_PARENT之后，它就像android一样工作。

Android WebView：无法制作全屏div元素

2 个答案: