Question

我需要一种方法让Flex Box在Android WebView股票浏览器中运行，我能够在运行Android 4.4的旧Android设备上实现正确的布局，但是当我在Android 6上使用它时，页面呈现为空白。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test Flex Layout</title>

<style>
    html,
    body,
    .container {
        height: 100vh; /*setting 100% here doesn't help either, and makes Android 4.4 render a blank page*/
        margin: 0px;
    }


    .container {
        display: flex;
        overflow: hidden;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

        .container > * {
            -ms-flex: 0 0 auto;
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
            overflow: scroll;
        }

        .container > .header,
        .container > .footer {
            height: 50px;
            background: grey;
            color: white;
            overflow: hidden;
        }

        .container > .main {
            -ms-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            display: flex;
            overflow: hidden;
            background: blue;
        }
</style>

</head>
    <body>
        <div class="container">
            <div class="header">Header</div>
            <div class="main">
                Some content
            </div>
            <div class="footer">Footer  </div>
        </div>
    </body>
</html>

这在Android 4.4 WebView上运行得很好，但在Android 6 WebView上完全失败，它可以在Android 6 Chrome浏览器上运行，但没有任何问题。

有没有办法在Android 6 WebView上使这个工作？

Android 6的示例Flex Box布局（股票浏览器 - WebView）

0 个答案: