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

【问题标题】：Android WebView: can't make a fullscreen div elementAndroid WebView：无法制作全屏 div 元素
【发布时间】：2016-12-21 02:39:27
【问题描述】：

我想要一个与屏幕（或视口）大小完全相同的 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 移动 chrome 相同。但是在我的应用程序中使用 WebView 时，它会显示蓝屏。我尝试了 50% 的高度，它在桌面和移动 chrome 浏览器中都能正常工作，但不适用于 WebView。 div 的高度始终为 0。仅当我将 div 的高度设置为 100px 等绝对单位时，才会显示红色矩形。我怎样才能让它正常工作？

【问题讨论】：

标签： android html web webview

【解决方案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。

【讨论】：

这行得通，但它有点 hacky，我的问题是为什么相同的代码适用于移动 Chrome，但不适用于使用相同渲染引擎的 webview。不过感谢您的回复。
@K J 你用的是哪个 webview 客户端？
安卓系统webview 52.0.2743.98
你可以使用chrome webview客户端再检查一下。

【解决方案2】：

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

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

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

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

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

【讨论】：