Jquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作答案

【问题标题】：Jquery mobile 1.4.0 and phonegap 3.3.0 not working correctlyJquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作
【发布时间】：2014-02-10 10:36:56
【问题描述】：

我正在使用 phonegap 创建一个 SPA ios 应用程序，但在使用最新版本 (1.4.0) 的 Jquery mobile 时遇到了一些问题。这些页面不适合 iphone 的屏幕，但它们一个接一个地出现，我可以向下滚动查看我的所有页面！（可能 data-role = "page" 工作不正常。任何人都可以对此有所了解。这是我的 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>App Home</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1,  maximum-scale=1, minimum-scale=1" />
        <!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />-->

        <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
        <script src="phonegap.js"></script>
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
        <script src="js/EmailComposer.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="js/jquery.ui.map.full.min.js"></script>
        <script src="js/jquery.imageLens.js"></script>
        <script src="js/jquery.alerts.js"></script>
        <script src="js/jquery-ui.min.js"></script>

        <script src="js/touchable.js"></script>
        <script src="js/iscroll.js"></script>
        <script src="js/date.js"></script>
        <script src="js/moduleScripts/timetoport.js"></script>
        <script src="js/moduleScripts/imageslogic.js"></script>
        <script src="js/moduleScripts/loadingScript.js"></script>
        <script src="js/moduleScripts/LoginController.js"></script>
        <script src="js/moduleScripts/kmlMap.js"></script>
        <script src="js/moduleScripts/tools.js"></script>
        <script src="js/moduleScripts/dataService.js"></script>
        <script src="js/jquery.mobile-1.4.0.js"></script>
        <script>
            $(document).ready(function() {
                InitializeLoginScreen();
                CheckDisclaimer();
            });

            $("#discpage1").live("pageshow",function() {
                $("#agree").click(function() {
                    localStorage.setItem('disclaimerAccepted', true);
                    tools.GoForward("#loginPage");
                });
                $("#disagree").click(function() {
                    localStorage.setItem('disclaimerAccepted', false);
                    navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
                });
            });

            $(document).delegate(".scroll-disabled", "scrollstart", false);
            </script>
    </head>

    <body id="boddy">

        <!-- LOGIN PAGE -->
        <div data-role="page" id="loginPage" class="scroll-disabled">
            <div data-role="header" class="header" >
                <div id="LoginHeader" class="headerText">Login</div>
            </div>
            <div data-role="content">
                <div>
                    <img src="images/shiplogo.png" id="logobspt">
                        <label id="ship2Go">Ships to go</label>
                </div>

                <div id="loginContainer">
                    <div>
                        <label for="uid" id="uidLabel">Username</label>
                        <input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
                    </div>

                    <div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
                        <img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
                            <div id="loadingMsg">
                                <center >Please wait...</center>
                            </div>
                    </div>

                    <div>
                        <label for="pwd" id="pwdLabel">Password</label>
                        <input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
                    </div>
                </div>

                <div class="Button" id="loginButton">Login</div>
                <div data-role="footer">
                    <div id="envLabel"></div>

                </div>

            </div>
        </div>
        <!-- DISCLAIMER PAGE -->

        <div data-role="page" id="discpage1" class="scroll-disabled">
            <!--<div id="dleftpanel"></div>
            <div id="drightpanel"></div>-->
            <div id="dcontent">
                <div id="bplogo"></div>
                <div id="shiplogo"></div>
                <div id="discHeading">Disclaimer</div>
                <div id="agree" class="Button discButton">I have read and I agree</div>
                <div id="disagree" class="Button discButton">Disagree</div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

这些是我的 config.xml 文件中的相关值：跨度>

标签： jquery-mobile cordova

【解决方案1】：

每当这种情况发生在我身上（我承认——它时常发生），jQuery Mobile 的 CSS 文件总是丢失，链接到错误的路径，或者我有错字（使用了“点”而不是“破折号”更常见）。

有可能吗？

一种快速的检查方法是在 Chrome（或其他）中打开您粘贴在上面的文件，然后查看调试控制台是否有任何与 CSS 文件有关的消息。

【讨论】：