Question

我正在使用xcode和phonegap进行移动开发。当我使用模拟器运行应用程序时，它不会应用任何样式表。请让我知道如何摆脱这个问题。

这是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>

请告诉我这里的错误。

谢谢，毗

Answer 1

我无法确定为什么没有应用css但检查以下

你确定你有正确的css和js文件路径吗？对于js，似乎一个js文件在脚本下，另一个在与index相同的文件夹中，css似乎也在同一个文件夹中 - 检查这是否是你的问题。我甚至不确定脚本是否会导致正确的路径 - 您可以尝试./scripts/file
你有2个视口元标记，我很确定这是一个错误。他们也部分相互矛盾。所以浏览器可能会用第二个覆盖第一个

确保在加载设备之前不使用phonegap api。在设备触发deviceready事件后加载页面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>

CSS没有在iphone / ipad模拟器中使用

1 个答案: