CSS pakt niet op in de iPhone/iPad-simulator

Ik gebruik xcode en phonegap voor mobiele ontwikkeling.Wanneer ik de toepassing met simulator uitvoer, past deze geen stylesheet toe. Laat me alsjeblieft weten hoe je van dit probleem af kunt komen.

Hier is de index.html pagina-code:



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

NIAID

</div> </div> <div id="get"> <div class="toolbar">

NED - Search Users

</div> <div class="info">
<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>
</div>
  • Results
<div class="toolbar"> Back</div> </div> <div id="Details" style="display: none"> <div class="toolbar">

User Details

</div> <div class="info"> <div id="result"> </div> </div> <div class="toolbar"> Back to results</div> </div> </div> </body> </html>

Laat me alsjeblieft weten wat hier fout gaat.

Bedankt, Visjnoe

0

1 antwoord

Ik weet niet zeker waarom er geen CSS wordt toegepast, maar controleer het volgende

  1. are you sure you have the right path to CSS and JS files? for JS it seems that one JS file is under scripts and the other in the same folder as index, the CSS also seems to be in the same folder - check if that may be your problem. I'm not even sure the the scripts leads to the right path - you can try ./scripts/file

  2. you have 2 viewports meta tags, I'm quite sure this is a mistake. they also partly contradict each other. so probably the browser would override the first one with the second one

  3. to make sure you don't use phonegap api before the device is loaded. best practice to load the page JS (besides the libraries) after the devices fires the deviceready event. like this example:

        $(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
toegevoegd
Bedankt voor het antwoord. CSS wordt nu opgehaald. Maar als ik jqtouch.css en theme.css. Opnemen, wordt zwart scherm weergegeven.
toegevoegd de auteur Setty, de bron