WEBVIEW-Android无法在Chrome浏览器中实现CSS

Question

I have a problem with showing a html file with css and webdatabase when I launch in chrome (in mobile phone) It's working correctly but when I implement in webview like some code missing. 我在chrome中（在手机中）启动时，显示带有css和webdatabase的html文件时出现问题。它工作正常，但是在webview中实现时却缺少一些代码。

Here my html: 这是我的html：

<!doctype html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en">
<![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en">
<![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>iWearZule TTS</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="js/db.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/script2.js"></script>
    <script src="js/jquery.crossword.js"></script>
    <script src="js/script.js"></script>
    <style type="text/css" media="screen">
        /*
        Default puzzle styling
        */
        body {
        font: 5vw Helvetica, sans-serif;
        width: 90.3%;
        margin: 10px auto;
        background-color: #e7e7ee;
        }
        /*                      body {
        font: 62.5%/1.3em Helvetica, sans-serif;
        width: 90.3%;
        margin: 10px auto;
        }*/
        #logo{
        margin-top: 5vh;
        text-align: center;
        }
        #imageLogo{
        margin: 0 auto;
        width: 70vw;
        /*                          padding: 0 1vw;*/
        }
        #pilihLevel{
        text-align: center;
        letter-spacing: 1vw;
        }
        .levelBulet{
        width:13vw;
        height: 13vw;
        background-color: #e7e7ee;
        border:1px solid black;
        border-radius: 100%;
        margin :2vw;
        text-align:center;
        }
        .labelBulet{
        margin :2.5vw;
        font-size: 7vw;
        }
        #level{
        text-align: center;
        }
        #containerLevel{
        /*                          text-align: center;     */
        display: -webkit-inline-flex;
        }
        #iTemplate,#iTemplateTableScore{
        display: none;
        }
        table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 90vw;
        height: 90vw;
        }
        table tr{
        width: 100%;
        }
        table td {
        width: 5vw;
        height: 5vw;
        border: 1px solid #cdcdcd;
        padding: 0;
        margin: 0;
        background-color: #333;
        position: relative;
        }
        td input {
        width: 100%;
        height: 100%;
        padding: 0em;
        border: none;
        text-align: center;
        font-size: 3em;
        color: #666;
        background-color: #f4f4f4;
        }
        td input:focus {
        background-color: #fff;
        }
        td span {
        color: #444;
        font-size: 0.8em;
        position: absolute;
        top: -1px;
        left: 1px;
        }
        input.done {
        font-weight: bold;
        color: green;
        }
        .active{
        background-color: white;
        }
        .clues-active {
        background-color: #fff;
        border-radius: 15vw;
        }
        .clue-done {
        color: #999;
        text-decoration: line-through;
        }
        #puzzle-wrapper {
        float: left;
        width: 90%;
        font: 62.5%/1.3em Helvetica, sans-serif;
        /*height: 90vw;*/
        /*margin-right: 3%;*/
        }
        #puzzle-clues {
        float: left;
        width: 90vw;
        font: 62.5%/1.3em Helvetica, sans-serif;
        }
        #puzzle-clues ul {
        padding:0;
        }
        #puzzle-clues li{
        font-size: 1.2em;
        text-align: center;
        line-height: 1.6em;
        list-style-type: none;
        }
        #content{
        margin-top:10vh;
        }
        #score{
        background-color: #fff;
        border-radius: 15vw;
        }
    </style>
</head>
<body>
<section id="first">
</section>
<section id="home" display="none">
    <div id="logo">
        <img src="images/logo-game.png" id="imageLogo"/>
    </div>
    <div id="content">
        <p id="pilihLevel">PILIH LEVEL</p>
    </div>
    <div id="level">
        <div id="containerLevel">
            <div id="iTemplate" class="levelBulet">
                <p class="labelBulet">1</p>
            </div>
        </div>
    </div>
</section>
<script>

</script>
</body>
</html>

And this is the way I implement to my webview: 这是我实现到Webview的方法：

    webView = (WebView) findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setDatabaseEnabled(true);
    webView.getSettings().setAppCacheEnabled(false);
    webView.getSettings().setDatabaseEnabled(true);
    String dbPath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
    webView.getSettings().setDatabasePath(dbPath);
    webView.setWebChromeClient(new WebChromeClient() {
        public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
            quotaUpdater.updateQuota(estimatedSize * 2);
        }
    });
    webView.loadUrl("file:///android_asset/game.html");

And the preview in my webview : http://postimg.org/image/ipei8ys4h/ 以及在我的网络视图中的预览： http : //postimg.org/image/ipei8ys4h/

And when I run in chrome : http://postimg.org/image/6b628a805/ 当我在chrome中运行时： http : //postimg.org/image/6b628a805/

Did I missing some code here? 我在这里错过了一些代码吗？

Thanks for helping 感谢您的帮助

Answer 1

Use separate style.css file for that purpose. 为此，请使用单独的style.css文件。

Check this answer. 检查此答案。 Rendering HTML in a WebView with custom CSS 使用自定义CSS在WebView中呈现HTML

WEBVIEW-Android无法在Chrome浏览器中实现CSS

问题描述

1 个解决方案

解决方案1
0 2015-06-25 07:55:57

WEBVIEW-Android无法在Chrome浏览器中实现CSS

问题描述

1 个解决方案

解决方案1 0 2015-06-25 07:55:57

解决方案1
0 2015-06-25 07:55:57