2011-12-06 5 views
0

モバイル開発用にxcodeとphonegapを使用しています。シミュレータでアプリケーションを実行すると、スタイルシートは適用されません。この問題を解決する方法を教えてください。ここでiphone/ipadシミュレータでCSSがピックアップされない

は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> 

私がここで間違ってやっているものを教えてください。何のCSSが適用されていない理由

おかげで、 ヴィシュヌ

答えて

0

は、私が確認することはできませんが、確認し、次の

  1. は、あなたは、CSSやJSファイルへの正しいパスを持っていることを確認していますか? jsの場合、1つのjsファイルはスクリプトの下にあり、もう1つはインデックスと同じフォルダにあるようですが、cssも同じフォルダにあるようです。スクリプトが正しいパスにつながっているかどうかもわかりません。あなたは試してみることができます。/scripts/file

  2. あなたは2つのビューポートメタタグを持っています。私は間違いだと確信しています。彼らはまた、お互いに矛盾している。おそらくブラウザは最初のデバイスを第2のデバイスで上書きするでしょう。

  3. デバイスをロードする前にphonegap apiを使用しないようにしてください。デバイスがデバイスイベントを発生させた後に、ページjs(ライブラリの他に)をロードするベストプラクティス。この例のように:私はjqtouch.cssを含み、theme.css .ITは黒画面が表示されている場合response.CSSため

    $(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

おかげnow.Butピックアップされます。 – Setty

関連する問題