Question

我正在使用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>

Answer 1

每当这种情况发生在我身上时（因为 - 我承认 - 它不时发生），总是jQuery Mobile的CSS文件丢失，链接到错误的路径，或者我有一个拼写错误（用过“点“而不是”破折号“通常不是）。

任何可能的机会？

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

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

1 个答案: