javascript - WEBVIEW - Android cannot implement css like in chrome browser -
i have problem showing html file css , webdatabase when launch in chrome (in mobile phone) it's working correctly when implement in webview code missing.
here 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 way implement 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 preview in webview : http://postimg.org/image/ipei8ys4h/
and when run in chrome : http://postimg.org/image/6b628a805/
did missing code here?
thanks helping
use separate style.css file purpose.
check answer. rendering html in webview custom css
Comments
Post a Comment