I’m making use of “JqueryMobile” for building my android app. The problem I’m facing is that JQueryMobile styles are not getting applied for the page..
Here is the code of my HTML page (in Webview)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"></link>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header"><h1>Categories</h1></div>
<div data-role="content">
<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#category-items?category=animals">Animals</a></li>
<li><a href="#category-items?category=colors">Colors</a></li>
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>
</div>
</div>
</body>
</html>
and below is the code in my Activity class,
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/www/index.html");
Any pointers on how to resolve it??
Found out the problem..
I was testing my app in the emulator which is Android 4.0.. It seems “Ice cream sandwich” is not supported by JQueryMobile and hence even the major features are not working properly.. Today I tested the same app(without any code modifications) in Android 2.3.3 and it worked like charm 🙂
It took almost 2 days for me to figure this out 🙁 posting it here for the sake of others 🙂