奇妙な問題すべてがエミュレーターで正常に動作しますが、デバイスでアプリケーションを実行しようとすると、すべての jquerymobile css ファイルが適用されず、コードの他の部分は引き続き動作し、css スタイルは機能しません。css ファイルがロードされていないようです。
jquery 1.8.1 jquerymobile 1.3.1 phonegap 1.9
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A navigation-view template generated by MyEclipse Mobile Tools"/>
<!-- <script src="http://debug.phonegap.com/target/target-script-min.js#dongdh"></script> -->
<!-- Load jquery css files -->
<link rel="stylesheet" type="text/css" href="css/library/jQuery/jquerymobile.css">
<link rel="stylesheet" type="text/css" href="css/library/jQuery/jquerymobile-structure.css">
<link rel="stylesheet" type="text/css" href="css/library/jQuery/jquerymobile-theme.css">
<script type="text/javascript" src="js/library/phonegap/cordova.js"></script>
<script type="text/javascript" src="js/library/jquery/jquery.js"></script>
<script type="text/javascript" src="js/library/jquery/jquerymobile.js"></script>
<script>
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady()
{
//Phonegap is ready
alert("Phonegap is ready");
}
$(document).on( "mobileinit", function() {
console.log("Initialize jQuery Mobile Phonegap Enhancement Configurations")
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = "none";
});
</script>
<!-- use require.js to load system -->
<!-- <script data-main="js/main.js" src="js/library/require/require.js"></script> -->
<!-- <script data-main="js/jm_requirejs_test.js" src="js/library/require/require.js"></script> -->
<title></title>
</head>
<body class="main_body">
<div data-role="page" id="index_container">
<div data-role="header" data-position="fixed">
test
</div><!-- /header -->
<div data-role="content" data-theme="a">
test
</div><!-- /content -->
<div data-role="footer" data-id="fool" data-position="fixed">
<div data-role="navbar">
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page" id="loading_container"></div>
<div data-role="page" id="main_container"></div>
<div data-role="page" id="login_container"></div>
<div data-role="page" id="userprofile_container"></div>
<div data-role="page" id="tutorial_container"></div>
</body>
</html>