2011-12-06 56 views
0

我使用xcode和phonegap進行移動開發。當我用模擬器運行應用程序時,它不適用任何樣式表。請讓我知道如何擺脫這個問題。CSS是不是在iphone/ipad模擬器撿起

下面是index.html頁面代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" /> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="default" /> 
    <link rel="stylesheet" type="text/css" href="jqtouch.css" /> 
    <link href="theme.css" rel="stylesheet" type="text/css" /> 
    <script src="Jquery.1.6.1.js" type="text/javascript"></script> 
    <script src="phonegap.js" type="text/javascript"></script> 
    <script type="text/javascript" src="Scripts/jqtouch.js"></script> 
    <script type="text/javascript"> 
     var jQT = new $.jQTouch({}); 
    </script> 
</head> 
<body > 
<div id="jqt"> 
    <div id="home"> 
     <div class="toolbar"> 
      <h1> 
       NIAID</h1> 
     </div> 
     <ul class="edgetoedge"> 
      <li class="arrow"><a href="#get">Search Users</a></li> 
     </ul> 
    </div> 
    <div id="get"> 
     <div class="toolbar"> 
      <h1> 
       NED - Search Users</h1> 
     </div> 
     <div class="info"> 
      <center> 
       <table> 
        <tr> 
         <td> 
          First Name : 
          <input type="text" id="txtFirstName" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Last Name : 
          <input type="text" id="txtLastName" /> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="button" id="btnSearch" value="Search" /> 
         </td> 
        </tr> 
       </table> 
      </center> 
     </div> 
     <ul class="edgetoedge" id="search-results"> 
      <li class="sep">Results</li> 
     </ul> 
     <ul id="placeholder" class="edgetoedge"> 
     </ul> 
     <div class="toolbar"> 
      <a class="back" href="#" onclick="ClearContents()">Back</a></div> 
    </div> 
    <div id="Details" style="display: none"> 
     <div class="toolbar"> 
      <h1> 
       User Details</h1> 
     </div> 
     <div class="info"> 
      <div id="result"> 
      </div> 
     </div> 
     <div class="toolbar"> 
      <a class="current" href="#" onclick="jQT.goBack();">Back to results</a></div> 
    </div> 


</div> 
</body> 
</html> 

請讓我知道我做錯了這裏。

感謝, 毗溼奴

回答

0

爲什麼沒有施加的CSS,但檢查以下

  1. 你確定你有CSS和JS文件正確的道路,我不能肯定?對於js,似乎一個js文件在腳本下,另一個在與index相同的文件夾中,css似乎也在同一個文件夾中 - 請檢查這可能是您的問題。我甚至不確定腳本是否會導致正確的路徑 - 您可以嘗試./scripts/file

  2. 您有2個視口元標記,我很確定這是一個錯誤。他們也部分相互矛盾。所以可能瀏覽器會覆蓋第一個與第二個

  3. 以確保您不使用phonegap api在設備加載之前。在設備觸發設備準備事件之後加載頁面js(除庫之外)的最佳實踐。如下例所示:

    $(document).ready(function(){ 
         document.addEventListener('deviceready',function(){ 
          var script = document.createElement('script'); 
          script.type = "text/javascript"; 
          script.src = "./path/to/yourjsscript.js";//change to fit the path 
          document.getElementsByTagName('body')[0].appendChild(script); 
         },false); 
        }); 
        </script> 
    
+0

感謝您的response.CSS被now.But拾取如果我包括jqtouch.css和theme.css。正是表示黑屏。 – Setty