Question

使用phonegap和jquery mobile开发的应用程序存在一个奇怪的问题：当应用程序启动时，样式不会应用但如果我在应用程序中浏览然后返回索引，我可以看到样式很好应用。我应该改变什么？这是我的index.html代码：

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0">
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 
var intervalloRefresh;
var intervalloRisultati;
var iter=0;

// Wait for Cordova to connect with the device
//
document.addEventListener("deviceready",onDeviceReady,false);

// Cordova is ready to be used!
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

</script>
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> --> 
<script type="text/javascript" src="jquery/jquery.mobile-1.1.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
    #pulsantiera{width:25%;height:100%;float:left;}
</style>
</head>
<body>
<div data-role="page"> 
      <div data-role="content"> 
        <div id="pulsantiera" data-role="controlgroup" data-type="vertical">
            <!-- <a href="javascript:void(0)" data-role="button" onclick="capturePhoto();">Allineamento</a> -->
            <a href="javascript:void(0)" data-role="button" onclick="allinea();">Allinea</a>
            <a href="percorsi.html" data-role="button">Percorsi</a>
            <a href="programma.html" data-role="button">Programma</a>
            <a href="video.html" data-role="button">Info</a>
            <a href="javascript:void(0)" data-role="button" onclick="capturePhoto();">Foto</a>
            <a href="chat.html" data-role="button">Chat</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('y');">Y</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('a');">A</a>
            <a href="javascript:void(0)" data-role="button" onclick="vote('n');">N</a>
        </div>
        <div style="width:74%;height:100%;margin-left:26%"  >   
            <h1 id="title">PATH</h1>
            <div id="content">
                <img src="images/IT_MAPPA.jpg">
            </div>
            <div id="vote" stle="display:none"></div>
        </div>
      </div>
 </div>

</body>
</html>

Answer 1

您是否尝试过切换CSS和JS文件的位置？

如果从上到下解析：

1) jquery is initialized
2) jquery mobile is initialized
3) then the CSS is loaded

因此当JQM开始工作时，JQM小部件所需的CSS就不存在了。

尝试切换到：

1) all CSS 
2) jquery 
3) jquery mobile

同时检查JQM page template。 CSS始终排在第一位。

应用启动时未应用样式

1 个答案: