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.
Here my 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) 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/
And when I run in chrome : http://postimg.org/image/6b628a805/
Did I missing some code here?
Thanks for helping
